Web safe colors CSS code uses a six-digit hexadecimal format where each digit pair represents red, green, and blue intensity from 00 (off) to FF (255, full on). The historical browser-safe palette contains exactly 216 such codes, constructed by restricting each of the three RGB channels to one of six values — 0, 51, 102, 153, 204, and 255 — written in hexadecimal as 00, 33, 66, 99, CC, and FF. Combining six choices independently across three channels produces 6 × 6 × 6, or 216, unique HEX entries such as #3366CC, #FF9900, and #009966. Every code in the palette follows this strict three-pair structure, so the cube can be expressed as a CSS list of 216 well-formed color values rather than an arbitrary assortment. Because each channel is a multiple of 51, web safe CSS code is also easy to recognize: a hex like #3366CC is in the cube because 0x33 (51), 0x66 (102), and 0xCC (204) are all multiples of 51, while #1234AB is not. The consistent spacing is what made the palette a reliable reference for early browsers that could only display 256 indexed colors at once.

web safe colors css code
web safe colors css code

The CSS HEX Format Behind the 216 Web Safe Codes

CSS defines a color literal with a leading hash and either three or six hexadecimal digits. The six-digit form, written #RRGGBB, is the canonical web safe CSS code format: the first pair sets red, the second sets green, and the third sets blue, each on a 00–FF scale. The three-digit form, written #RGB, expands to #RRGGBB by duplicating each digit — so #369 becomes #336699 — and any cube color whose three pairs share digits works in either form. The web safe cube is simply the set of every #RRGGBB string whose red, green, and blue pairs each land on one of the six allowed levels. That single rule generates the entire 216-entry palette, which is why the Web Safe Colors Chart can show the complete list from a small piece of code instead of a hand-typed table.

Because the rule is mechanical, you can audit any claimed web safe code by checking whether each byte is a multiple of 51. Decimal 51 is 33 in hex, 102 is 66, 153 is 99, 204 is CC, and 255 is FF. The full allowed ladder is therefore 00, 33, 66, 99, CC, FF — exactly six values, evenly spaced 51 apart. Memorizing those six pairs is enough to read any web safe CSS code at a glance and to spot codes that do not belong to the cube.

Why the Channel Levels Are 00, 33, 66, 99, CC, and FF

The six levels come from dividing the 0–255 range into five equal steps of 51. Six endpoints spaced 51 apart — 0, 51, 102, 153, 204, 255 — cover the full byte without overlap or gaps. Each level is also expressed in two-digit hexadecimal because CSS color literals require exactly two hex digits per channel. Converting 51 to base 16 produces 33, 102 produces 66, 153 produces 99, 204 produces CC, and 255 produces FF, leaving 00 as the starting point. The result is six recognizable pairs that round-trip cleanly between decimal and hex.

Decimal channel valueHex digit pairCSS shorthand pair
00000
513333
1026666
1539999
204CCCC
255FFFF

This table is the entire grammar of the cube. Any #RRGGBB whose three pairs all appear in the right column is a valid web safe CSS code; any pair outside the column is outside the palette. W3C's introduction to CSS documents these six evenly spaced levels as the original browser-safe color definition, so the rule has a long-standing authoritative source rather than a community convention.

Putting a Web Safe Code in a Stylesheet

Once you have a cube entry such as #3366CC, it drops into any CSS property that accepts a color. The Web Safe Colors Chart lets you browse the 216 swatches, copy the full six-digit HEX for whichever entry you pick, and paste it straight into your stylesheet. The same code works in color, background-color, border-color, outline-color, fill, stroke, and any other color-accepting property.

  1. Open the Web Safe Colors Chart and scan the 216-swatch grid until you find the color you want.
  2. Click the swatch; the chart displays the full six-digit HEX (for example #3366CC) in a larger result area, plus the matching RGB triplet.
  3. Copy the six-digit value — the accessible label and title attribute always contain the complete code, even when the swatch only shows a shortened hint.
  4. Paste it into your CSS, prefixing with a hash: color: #3366CC; or background-color: #3366CC;.
  5. If your three pairs repeat across each channel, use the three-digit shorthand: #369 expands to #336699, saving four characters per declaration.
  6. Alternatively, paste the equivalent rgb(51, 102, 204) form if your project standardizes on functional notation.

For palettes, list the chosen codes as CSS custom properties so the same values stay consistent across rules: --brand-blue: #3366CC; inside :root, then color: var(--brand-blue); elsewhere. Clipboard access can be denied by browser permissions, but the visible code remains available for manual selection when that happens.

CSS Shorthand, rgb(), and the Hex Conversion

The web safe codes have a useful property: the three-digit and six-digit HEX forms always agree on the cube, and the decimal triplet is always an exact multiple of 51. That makes round-tripping between #RRGGBB, #RGB, and rgb(r, g, b) lossless inside the palette. A code such as #009966 decomposes to red 0, green 153, blue 102 — values that are unambiguous in any notation, so a HEX to RGB converter is purely a format change rather than a color shift. The shorthand expansion rule is built into CSS, not into the cube: #0C9 expands to #00CC99 because the parser duplicates each hex digit before lookup, and 00, CC, 99 all land on allowed levels, so the expanded value is still a valid web safe code.

When you need to match a HEX that is not already in the cube, the Web Safe Colors Chart rounds each channel independently to the nearest multiple of 51 and recombines the three snapped levels. For example, the input #3470D0 becomes:

  • Red 0x34 = 52 → nearest multiple of 51 is 51 → 0x33
  • Green 0x70 = 112 → nearest multiple of 51 is 102 → 0x66
  • Blue 0xD0 = 208 → nearest multiple of 51 is 204 → 0xCC

Recombined, the snapped CSS code is #3366CC. Because the three axes are independent and evenly spaced, this channel-by-channel rounding is equivalent to a nearest-neighbor search in the unweighted RGB cube. It is a deterministic, easy-to-audit rule rather than a perceptual match, so do not expect the visually closest swatch to always coincide with a perceptually uniform CIELAB result.

What Web Safe CSS Code Cannot Guarantee

The "web safe" label is a historical compatibility claim about how 8-bit displays rendered cube colors, not a promise about modern screens, accessibility, print, or branding. Today's browsers render millions or billions of distinct colors, so web safe status is no longer required for ordinary website styling — it is a deliberate constraint or a learning aid, not a default. The label also has nothing to do with text legibility: a swatch can be in the cube and still fail WCAG contrast against a chosen background, or pass against one background and fail against another.

After choosing codes, run the actual foreground/background pair through a dedicated contrast tool rather than assuming that a famous palette guarantees readability. Font size, weight, and the applicable WCAG criterion all matter, and the same HEX can behave very differently on top of #FFFFFF versus #000000. For palette decisions that need perceptual accuracy, especially across an entire image or brand system, a cube match is a starting point rather than a final answer — specialist workflows compare in CIELAB or OKLCH, apply an ICC profile, or optimize over a full image instead of channel-by-channel snapping.

The cube remains a transparent, easy-to-teach reference for hexadecimal channels and a quick way to copy a CSS-ready code from a constrained palette. Treat it as a documented historical grid, paste its HEX values into stylesheets when the brief calls for it, and keep its dated compatibility purpose explicit when you ship the result.