HTML Color Code Chart

Browse named HTML colors with HEX, RGB, and HSL values, search by name, and copy color codes.

Tested tool guide Tested browser tools Checked August 16, 2026

What HTML Color Code Chart does, with a checked example

Looking up a CSS color keyword is the core job of this chart. Search for a named entry or browse the swatches, then read and copy the corresponding HEX, RGB, or HSL value for use in a stylesheet, design note, or comparison. The three numeric forms represent the same listed color through different coordinate systems. The main trap is scope: this is a catalog of predefined names, not a tool that assigns official names to arbitrary custom colors. A familiar phrase such as bright blue is not necessarily a valid keyword.

Worked example

A concrete input and expected output from the current implementation.

Input

fuchsia

Expected output

Fuchsia - HEX: #FF00FF; RGB: rgb(255, 0, 255); HSL: hsl(300, 100%, 50%)

The hexadecimal pairs FF, 00, and FF equal decimal channel values 255, 0, and 255. Those channels produce a hue of 300 degrees at full saturation and 50 percent lightness.

How the result is produced

Finding a named color

The chart links each swatch to a predefined color name and three displayed code forms. Search is useful when you already know the keyword; browsing is useful when you want to compare names and swatches. After locating an entry, copy its HEX, RGB, or HSL code according to the notation required by the destination. For dependable matching, enter the color name itself rather than a full CSS declaration.

Reading the code forms

The HEX field encodes red, green, and blue as three two-digit hexadecimal pairs. RGB reports those channels as decimal numbers, while HSL describes hue, saturation, and lightness. These are alternate coordinates for the displayed swatch, not separate color suggestions. For fuchsia, FF maps to 255 and 00 maps to 0; the full RGB triplet is therefore 255, 0, 255.

Good uses

Confirming the exact numeric value of a named CSS color before adding the keyword or copied code to a production stylesheet.
Translating a color name from a design brief into HEX, RGB, or HSL notation for a component specification or style guide.
Comparing standard named swatches when documentation, a bug report, or an existing stylesheet refers to colors by keyword rather than by channel values.

Limits and checks

Entering a custom value such as #123456 does not make the chart assign the closest named swatch; its search is for existing color names.
Different keywords can be exact aliases. Fuchsia and magenta both denote #FF00FF, so distinct names do not guarantee distinct colors.
A swatch and its codes do not establish accessible contrast. Foreground and background colors still require a separate contrast check in their actual context.

Common questions

Can I use a listed color name directly in CSS?

Yes. A listed CSS named-color keyword can be used wherever a property accepts a color value. Keywords are ASCII case-insensitive, but multiword names are written as one identifier, such as lightgoldenrodyellow. You can instead copy the listed HEX, RGB, or HSL form when a project convention or design handoff requires numeric notation.

Why do fuchsia and magenta have the same codes?

Those names are aliases in the standardized named-color set. Both fuchsia and magenta resolve to #FF00FF, RGB 255, 0, 255, and HSL 300, 100 percent, 50 percent. The browser color is therefore the same. Choosing one name over the other can reflect a project's vocabulary or style rules, but it does not select a different swatch.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.