HTML Color Codes

Pick a color or type a HEX, RGB or HSL code to convert it, check its WCAG contrast against white and black, and browse all 148 CSS named colors.

3 or 6 hex digits, e.g. #F63 or #FF6347
Red, green, blue from 0 to 255, e.g. rgb(255, 99, 71)
Hue 0–360, saturation and lightness 0–100%, e.g. hsl(9, 100%, 64%)

Tints and shades

Click a swatch to use it, or copy its code. Shades are mixed with black, tints with white.

    All 148 CSS named colors

    Sort

    Showing all 148 named colors.

    • aliceblue #F0F8FF rgb(240, 248, 255)
    • antiquewhite #FAEBD7 rgb(250, 235, 215)
    • aqua #00FFFF rgb(0, 255, 255)
    • aquamarine #7FFFD4 rgb(127, 255, 212)
    • azure #F0FFFF rgb(240, 255, 255)
    • beige #F5F5DC rgb(245, 245, 220)
    • bisque #FFE4C4 rgb(255, 228, 196)
    • black #000000 rgb(0, 0, 0)
    • blanchedalmond #FFEBCD rgb(255, 235, 205)
    • blue #0000FF rgb(0, 0, 255)
    • blueviolet #8A2BE2 rgb(138, 43, 226)
    • brown #A52A2A rgb(165, 42, 42)
    • burlywood #DEB887 rgb(222, 184, 135)
    • cadetblue #5F9EA0 rgb(95, 158, 160)
    • chartreuse #7FFF00 rgb(127, 255, 0)
    • chocolate #D2691E rgb(210, 105, 30)
    • coral #FF7F50 rgb(255, 127, 80)
    • cornflowerblue #6495ED rgb(100, 149, 237)
    • cornsilk #FFF8DC rgb(255, 248, 220)
    • crimson #DC143C rgb(220, 20, 60)
    • cyan #00FFFF rgb(0, 255, 255)
    • darkblue #00008B rgb(0, 0, 139)
    • darkcyan #008B8B rgb(0, 139, 139)
    • darkgoldenrod #B8860B rgb(184, 134, 11)
    • darkgray #A9A9A9 rgb(169, 169, 169)
    • darkgreen #006400 rgb(0, 100, 0)
    • darkgrey #A9A9A9 rgb(169, 169, 169)
    • darkkhaki #BDB76B rgb(189, 183, 107)
    • darkmagenta #8B008B rgb(139, 0, 139)
    • darkolivegreen #556B2F rgb(85, 107, 47)
    • darkorange #FF8C00 rgb(255, 140, 0)
    • darkorchid #9932CC rgb(153, 50, 204)
    • darkred #8B0000 rgb(139, 0, 0)
    • darksalmon #E9967A rgb(233, 150, 122)
    • darkseagreen #8FBC8F rgb(143, 188, 143)
    • darkslateblue #483D8B rgb(72, 61, 139)
    • darkslategray #2F4F4F rgb(47, 79, 79)
    • darkslategrey #2F4F4F rgb(47, 79, 79)
    • darkturquoise #00CED1 rgb(0, 206, 209)
    • darkviolet #9400D3 rgb(148, 0, 211)
    • deeppink #FF1493 rgb(255, 20, 147)
    • deepskyblue #00BFFF rgb(0, 191, 255)
    • dimgray #696969 rgb(105, 105, 105)
    • dimgrey #696969 rgb(105, 105, 105)
    • dodgerblue #1E90FF rgb(30, 144, 255)
    • firebrick #B22222 rgb(178, 34, 34)
    • floralwhite #FFFAF0 rgb(255, 250, 240)
    • forestgreen #228B22 rgb(34, 139, 34)
    • fuchsia #FF00FF rgb(255, 0, 255)
    • gainsboro #DCDCDC rgb(220, 220, 220)
    • ghostwhite #F8F8FF rgb(248, 248, 255)
    • gold #FFD700 rgb(255, 215, 0)
    • goldenrod #DAA520 rgb(218, 165, 32)
    • gray #808080 rgb(128, 128, 128)
    • green #008000 rgb(0, 128, 0)
    • greenyellow #ADFF2F rgb(173, 255, 47)
    • grey #808080 rgb(128, 128, 128)
    • honeydew #F0FFF0 rgb(240, 255, 240)
    • hotpink #FF69B4 rgb(255, 105, 180)
    • indianred #CD5C5C rgb(205, 92, 92)
    • indigo #4B0082 rgb(75, 0, 130)
    • ivory #FFFFF0 rgb(255, 255, 240)
    • khaki #F0E68C rgb(240, 230, 140)
    • lavender #E6E6FA rgb(230, 230, 250)
    • lavenderblush #FFF0F5 rgb(255, 240, 245)
    • lawngreen #7CFC00 rgb(124, 252, 0)
    • lemonchiffon #FFFACD rgb(255, 250, 205)
    • lightblue #ADD8E6 rgb(173, 216, 230)
    • lightcoral #F08080 rgb(240, 128, 128)
    • lightcyan #E0FFFF rgb(224, 255, 255)
    • lightgoldenrodyellow #FAFAD2 rgb(250, 250, 210)
    • lightgray #D3D3D3 rgb(211, 211, 211)
    • lightgreen #90EE90 rgb(144, 238, 144)
    • lightgrey #D3D3D3 rgb(211, 211, 211)
    • lightpink #FFB6C1 rgb(255, 182, 193)
    • lightsalmon #FFA07A rgb(255, 160, 122)
    • lightseagreen #20B2AA rgb(32, 178, 170)
    • lightskyblue #87CEFA rgb(135, 206, 250)
    • lightslategray #778899 rgb(119, 136, 153)
    • lightslategrey #778899 rgb(119, 136, 153)
    • lightsteelblue #B0C4DE rgb(176, 196, 222)
    • lightyellow #FFFFE0 rgb(255, 255, 224)
    • lime #00FF00 rgb(0, 255, 0)
    • limegreen #32CD32 rgb(50, 205, 50)
    • linen #FAF0E6 rgb(250, 240, 230)
    • magenta #FF00FF rgb(255, 0, 255)
    • maroon #800000 rgb(128, 0, 0)
    • mediumaquamarine #66CDAA rgb(102, 205, 170)
    • mediumblue #0000CD rgb(0, 0, 205)
    • mediumorchid #BA55D3 rgb(186, 85, 211)
    • mediumpurple #9370DB rgb(147, 112, 219)
    • mediumseagreen #3CB371 rgb(60, 179, 113)
    • mediumslateblue #7B68EE rgb(123, 104, 238)
    • mediumspringgreen #00FA9A rgb(0, 250, 154)
    • mediumturquoise #48D1CC rgb(72, 209, 204)
    • mediumvioletred #C71585 rgb(199, 21, 133)
    • midnightblue #191970 rgb(25, 25, 112)
    • mintcream #F5FFFA rgb(245, 255, 250)
    • mistyrose #FFE4E1 rgb(255, 228, 225)
    • moccasin #FFE4B5 rgb(255, 228, 181)
    • navajowhite #FFDEAD rgb(255, 222, 173)
    • navy #000080 rgb(0, 0, 128)
    • oldlace #FDF5E6 rgb(253, 245, 230)
    • olive #808000 rgb(128, 128, 0)
    • olivedrab #6B8E23 rgb(107, 142, 35)
    • orange #FFA500 rgb(255, 165, 0)
    • orangered #FF4500 rgb(255, 69, 0)
    • orchid #DA70D6 rgb(218, 112, 214)
    • palegoldenrod #EEE8AA rgb(238, 232, 170)
    • palegreen #98FB98 rgb(152, 251, 152)
    • paleturquoise #AFEEEE rgb(175, 238, 238)
    • palevioletred #DB7093 rgb(219, 112, 147)
    • papayawhip #FFEFD5 rgb(255, 239, 213)
    • peachpuff #FFDAB9 rgb(255, 218, 185)
    • peru #CD853F rgb(205, 133, 63)
    • pink #FFC0CB rgb(255, 192, 203)
    • plum #DDA0DD rgb(221, 160, 221)
    • powderblue #B0E0E6 rgb(176, 224, 230)
    • purple #800080 rgb(128, 0, 128)
    • rebeccapurple #663399 rgb(102, 51, 153)
    • red #FF0000 rgb(255, 0, 0)
    • rosybrown #BC8F8F rgb(188, 143, 143)
    • royalblue #4169E1 rgb(65, 105, 225)
    • saddlebrown #8B4513 rgb(139, 69, 19)
    • salmon #FA8072 rgb(250, 128, 114)
    • sandybrown #F4A460 rgb(244, 164, 96)
    • seagreen #2E8B57 rgb(46, 139, 87)
    • seashell #FFF5EE rgb(255, 245, 238)
    • sienna #A0522D rgb(160, 82, 45)
    • silver #C0C0C0 rgb(192, 192, 192)
    • skyblue #87CEEB rgb(135, 206, 235)
    • slateblue #6A5ACD rgb(106, 90, 205)
    • slategray #708090 rgb(112, 128, 144)
    • slategrey #708090 rgb(112, 128, 144)
    • snow #FFFAFA rgb(255, 250, 250)
    • springgreen #00FF7F rgb(0, 255, 127)
    • steelblue #4682B4 rgb(70, 130, 180)
    • tan #D2B48C rgb(210, 180, 140)
    • teal #008080 rgb(0, 128, 128)
    • thistle #D8BFD8 rgb(216, 191, 216)
    • tomato #FF6347 rgb(255, 99, 71)
    • turquoise #40E0D0 rgb(64, 224, 208)
    • violet #EE82EE rgb(238, 130, 238)
    • wheat #F5DEB3 rgb(245, 222, 179)
    • white #FFFFFF rgb(255, 255, 255)
    • whitesmoke #F5F5F5 rgb(245, 245, 245)
    • yellow #FFFF00 rgb(255, 255, 0)
    • yellowgreen #9ACD32 rgb(154, 205, 50)

    How to use the color code converter

    Choose a color with the picker, or type a code into the HEX, RGB or HSL box — the other boxes, the preview, the contrast checks and the tints and shades all update as you type. A red border means the code could not be read; the hint under the box shows the accepted format. Every result has a copy button, and the page address keeps your color, so you can bookmark or share it. Below the converter, search the 148 CSS named colors by name, hex code or RGB value, and click any swatch to load it.

    How HEX, RGB and HSL codes work

    Screens mix red, green and blue light. RGB gives each channel a value from 0 to 255, so there are 256³ = 16,777,216 colors. A HEX code is the same three numbers in base 16: #RRGGBB, where each pair is one channel, and each pair is worth first digit × 16 + second digit. The three-digit form doubles each digit, so #F63 means #FF6633. (The hex to decimal converter shows that step in detail.)

    HSL describes the same color by hue, saturation and lightness. With R, G and B scaled to 0–1, max and min the largest and smallest of them, and d = max − min:

    L = (max + min) ÷ 2 S = d ÷ (1 − |2L − 1|) (0 when d = 0) H = 60° × ((G − B) ÷ d mod 6) when R is the max H = 60° × ((B − R) ÷ d + 2) when G is the max H = 60° × ((R − G) ÷ d + 4) when B is the max

    Worked example: tomato

    This is the color the tool loads first, the CSS named color tomato:

    • HEX → RGB: FF = 15 × 16 + 15 = 255, 63 = 6 × 16 + 3 = 99, 47 = 4 × 16 + 7 = 71, so rgb(255, 99, 71).
    • RGB → HSL: max = 1 (red), min = 71 ÷ 255 = 0.2784. L = (1 + 0.2784) ÷ 2 = 63.9%, S = 0.7216 ÷ (1 − |2 × 0.6392 − 1|) = 100%, H = 60° × (0.3882 − 0.2784) ÷ 0.7216 = 9.1°, giving hsl(9.1, 100%, 63.9%).
    • Relative luminance: the linear channel values are 1, 0.1248 and 0.0630, so L = 0.2126 × 1 + 0.7152 × 0.1248 + 0.0722 × 0.0630 = 0.3064.
    • Contrast: against white (1.05) ÷ (0.3064 + 0.05) = 2.94:1, which fails even the 3:1 large-text minimum; against black (0.3064 + 0.05) ÷ 0.05 = 7.12:1, which passes AAA. So use black text on a tomato button, not white.

    How the WCAG contrast check works

    WCAG 2 compares the relative luminance of two colors. Each channel is divided by 255, turned into linear light (values up to 0.04045 are divided by 12.92; larger ones become ((c + 0.055) ÷ 1.055)2.4), and weighted by how bright it looks to the eye:

    L = 0.2126 R + 0.7152 G + 0.0722 B contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)

    The result runs from 1:1 (identical colors) to 21:1 (black on white). The thresholds are:

    LevelNormal textLarge text
    AA (SC 1.4.3)4.5:13:1
    AAA (SC 1.4.6)7:14.5:1

    “Large” means at least 18 point, or 14 point bold — roughly 24 px, or 18.66 px bold. Icons, input borders and other essential interface graphics need 3:1 against their surroundings (SC 1.4.11). The tool rounds ratios down, so a color that just misses a threshold never displays as passing: #767676 on white is 4.54:1 and passes AA, while #777777 falls just short of 4.5:1.

    About the CSS named colors

    CSS Color Module Level 4 defines 148 color keywords. Sixteen — such as aqua, navy and silver — come from the original VGA palette used in early HTML; most of the rest come from the X11 color list via SVG. The newest is rebeccapurple (#663399), added in honor of Rebecca Meyer, daughter of CSS author Eric Meyer. The names are case-insensitive, and the spec itself warns that they are unevenly spread and inconsistent (darkgray is lighter than gray), so for a design system, prefer explicit HEX or HSL values.

    Tips and common mistakes

    • Test real pairs. A brand color can pass on white and fail on your gray background — check the actual combination.
    • Hex digits are not decimal. #99 is 153, not 99; #A0 is 160.
    • Lightness is not luminance. hsl(60, 100%, 50%) yellow and hsl(240, 100%, 50%) blue have the same HSL lightness but contrast ratios with white of 1.07:1 and 8.59:1.
    • Mixing is done in sRGB, as in most design tools; mixing in other color spaces (such as OKLCH) gives slightly different midpoints.

    More developer references: the ASCII table and HTTP status codes.

    Frequently asked questions

    What is the difference between HEX, RGB and HSL?

    They describe the same sRGB colors in different notations. HEX writes the red, green and blue values (0–255) as two hexadecimal digits each, RGB writes them in decimal, and HSL describes the color by hue (0–360°), saturation and lightness (0–100%), which is easier for making a color lighter, darker or less vivid.

    How many named colors does CSS have?

    148 named colors are defined in CSS Color Module Level 4, all listed on this page. Seven grays have both “gray” and “grey” spellings, and aqua/cyan and fuchsia/magenta are exact duplicates. The keywords transparent and currentcolor are defined separately and are not in the list.

    What contrast ratio do I need for accessible text?

    WCAG 2 Level AA needs at least 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold, which is about 24 px or 18.66 px). Level AAA raises this to 7:1 and 4.5:1. The ratio is the same whichever color is the text and whichever is the background.

    What is the difference between a tint and a shade?

    A tint is a color mixed with white, making it lighter; a shade is a color mixed with black, making it darker. This tool mixes in steps of 20% in sRGB.

    Why is darkgray lighter than gray?

    Because the CSS names come from the old X11 color list, where darkgray (#A9A9A9) was defined independently of the HTML gray (#808080). CSS Color 4 itself calls the names inconsistent and keeps them only for compatibility.

    Sources

    Last reviewed · Built and checked by the Reeliy team · How we test our tools