Easily find the HEX color codes, RGB values, and CSS values for the color you want, including online CSS Color Picker.
Colors are vital in web design, helping convey messages, evoke emotions, and create a visually appealing experience.
This comprehensive guide will explore different CSS color code types, use cases, gradients, conversion tools, accessibility, and color scheme resources to master the art of coloring your web designs.
CSS offers various color code types, including HEX, RGB, HSL, and Named Colors, providing flexibility and precision when defining colors in your web projects. The provided CSS color code chart makes it easy to find the right color for your designs.
Represent colors using a combination of six hexadecimal digits. Each pair corresponds to red, green, and blue values, with the range from 00 to FF. For example, #FF5733 is a shade of orange.
HEX codes are widely used for their compact representation, making it easier to copy and share. They are suitable for simple web designs, where transparency is not a requirement. Examples include background colors, font colors, and border colors.
Define colors using red, green, and blue values ranging from 0 to 255. For example, rgb(255,87,51) represents the same orange shade as the HEX code above.
RGB and RGBA (with transparency) are perfect for situations that require color blending or transparency. Examples include semi-transparent backgrounds, overlays, and shadows.
Define colors using Hue (0-360), Saturation (0%-100%), and Lightness (0%-100%). For example, hsl(12, 100%, 60%) is the equivalent of the orange shade used in previous examples.
HSL and HSLA (with transparency) are useful when you need to adjust a color's hue, saturation, or lightness without affecting other properties. Examples include theming, color transitions, and responsive designs.
CSS offers 147 predefined named colors that you can use directly in your code. For example, "orange" is a named color that corresponds to the HEX code #FFA500.
Named colors are ideal for rapid prototyping and readability in the code. However, they offer limited color options compared to other formats. Examples include basic styling, prototyping, and educational purposes.
To learn more about color names, visit our comprehensive list of color names.
| COLOR NAME | HEX | RGB |
|---|---|---|
| RED CSS COLOR CODES | ||
| IndianRed | #CD5C5C | rgb(205,92,92) |
| LightCoral | #F08080 | rgb(240,128,128) |
| Salmon | #FA8072 | rgb(250,128,114) |
| DarkSalmon | #E9967A | rgb(233,150,122) |
| LightSalmon | #FFA07A | rgb(255,160,122) |
| Crimson | #DC143C | rgb(220,20,60) |
| Red | #FF0000 | rgb(255,0,0) |
| FireBrick | #B22222 | rgb(178,34,34) |
| DarkRed | #8B0000 | rgb(139,0,0) |
| PINK CSS COLOR CODES | ||
| Pink | #FFC0CB | rgb(255,192,203) |
| LightPink | #FFB6C1 | rgb(255,182,193) |
| HotPink | #FF69B4 | rgb(255,105,180) |
| DeepPink | #FF1493 | rgb(255,20,147) |
| MediumVioletRed | #C71585 | rgb(199,21,133) |
| PaleVioletRed | #DB7093 | rgb(219,112,147) |
| ORANGE CSS COLOR CODES | ||
| Coral | #FF7F50 | rgb(255,127,80) |
| Tomato | #FF6347 | rgb(255,99,71) |
| OrangeRed | #FF4500 | rgb(255,69,0) |
| DarkOrange | #FF8C00 | rgb(255,140,0) |
| Orange | #FFA500 | rgb(255,165,0) |
| YELLOW CSS COLOR CODES | ||
| Gold | #FFD700 | rgb(255,215,0) |
| Yellow | #FFFF00 | rgb(255,255,0) |
| LightYellow | #FFFFE0 | rgb(255,255,224) |
| LemonChiffon | #FFFACD | rgb(255,250,205) |
| LightGoldenrodYellow | #FAFAD2 | rgb(250,250,210) |
| PapayaWhip | #FFEFD5 | rgb(255,239,213) |
| Moccasin | #FFE4B5 | rgb(255,228,181) |
| PeachPuff | #FFDAB9 | rgb(255,218,185) |
| PaleGoldenrod | #EEE8AA | rgb(238,232,170) |
| Khaki | #F0E68C | rgb(240,230,140) |
| DarkKhaki | #BDB76B | rgb(189,183,107) |
| PURPLE CSS COLOR CODES | ||
| Lavender | #E6E6FA | rgb(230,230,250) |
| Thistle | #D8BFD8 | rgb(216,191,216) |
| Plum | #DDA0DD | rgb(221,160,221) |
| Violet | #EE82EE | rgb(238,130,238) |
| Orchid | #DA70D6 | rgb(218,112,214) |
| Fuchsia | #FF00FF | rgb(255,0,255) |
| Magenta | #FF00FF | rgb(255,0,255) |
| MediumOrchid | #BA55D3 | rgb(186,85,211) |
| MediumPurple | #9370DB | rgb(147,112,219) |
| BlueViolet | #8A2BE2 | rgb(138,43,226) |
| DarkViolet | #9400D3 | rgb(148,0,211) |
| DarkOrchid | #9932CC | rgb(153,50,204) |
| DarkMagenta | #8B008B | rgb(139,0,139) |
| Purple | #800080 | rgb(128,0,128) |
| RebeccaPurple | #663399 | rgb(102,51,153) |
| Indigo | #4B0082 | rgb(75,0,130) |
| MediumSlateBlue | #7B68EE | rgb(123,104,238) |
| SlateBlue | #6A5ACD | rgb(106,90,205) |
| DarkSlateBlue | #483D8B | rgb(72,61,139) |
| GREEN CSS COLOR CODES | ||
| GreenYellow | #ADFF2F | rgb(173,255,47) |
| Chartreuse | #7FFF00 | rgb(127,255,0) |
| LawnGreen | #7CFC00 | rgb(124,252,0) |
| Lime | #00FF00 | rgb(0,255,0) |
| LimeGreen | #32CD32 | rgb(50,205,50) |
| PaleGreen | #98FB98 | rgb(152,251,152) |
| LightGreen | #90EE90 | rgb(144,238,144) |
| MediumSpringGreen | #00FA9A | rgb(0,250,154) |
| SpringGreen | #00FF7F | rgb(0,255,127) |
| MediumSeaGreen | #3CB371 | rgb(60,179,113) |
| SeaGreen | #2E8B57 | rgb(46,139,87) |
| ForestGreen | #228B22 | rgb(34,139,34) |
| Green | #008000 | rgb(0,128,0) |
| DarkGreen | #006400 | rgb(0,100,0) |
| YellowGreen | #9ACD32 | rgb(154,205,50) |
| OliveDrab | #6B8E23 | rgb(107,142,35) |
| Olive | #808000 | rgb(128,128,0) |
| DarkOliveGreen | #556B2F | rgb(85,107,47) |
| MediumAquamarine | #66CDAA | rgb(102,205,170) |
| DarkSeaGreen | #8FBC8F | rgb(143,188,143) |
| LightSeaGreen | #20B2AA | rgb(32,178,170) |
| DarkCyan | #008B8B | rgb(0,139,139) |
| Teal | #008080 | rgb(0,128,128) |
| BLUE/CYAN CSS COLOR CODES | ||
| Aqua | #00FFFF | rgb(0,255,255) |
| Cyan | #00FFFF | rgb(0,255,255) |
| LightCyan | #E0FFFF | rgb(224,255,255) |
| PaleTurquoise | #AFEEEE | rgb(175,238,238) |
| Aquamarine | #7FFFD4 | rgb(127,255,212) |
| Turquoise | #40E0D0 | rgb(64,224,208) |
| MediumTurquoise | #48D1CC | rgb(72,209,204) |
| DarkTurquoise | #00CED1 | rgb(0,206,209) |
| CadetBlue | #5F9EA0 | rgb(95,158,160) |
| SteelBlue | #4682B4 | rgb(70,130,180) |
| LightSteelBlue | #B0C4DE | rgb(176,196,222) |
| PowderBlue | #B0E0E6 | rgb(176,224,230) |
| LightBlue | #ADD8E6 | rgb(173,216,230) |
| SkyBlue | #87CEEB | rgb(135,206,235) |
| LightSkyBlue | #87CEFA | rgb(135,206,250) |
| DeepSkyBlue | #00BFFF | rgb(0,191,255) |
| DodgerBlue | #1E90FF | rgb(30,144,255) |
| CornflowerBlue | #6495ED | rgb(100,149,237) |
| RoyalBlue | #4169E1 | rgb(65,105,225) |
| Blue | #0000FF | rgb(0,0,255) |
| MediumBlue | #0000CD | rgb(0,0,205) |
| DarkBlue | #00008B | rgb(0,0,139) |
| Navy | #000080 | rgb(0,0,128) |
| MidnightBlue | #191970 | rgb(25,25,112) |
| BROWN CSS COLOR CODES | ||
| Cornsilk | #FFF8DC | rgb(255,248,220) |
| BlanchedAlmond | #FFEBCD | rgb(255,235,205) |
| Bisque | #FFE4C4 | rgb(255,228,196) |
| NavajoWhite | #FFDEAD | rgb(255,222,173) |
| Wheat | #F5DEB3 | rgb(245,222,179) |
| BurlyWood | #DEB887 | rgb(222,184,135) |
| Tan | #D2B48C | rgb(210,180,140) |
| RosyBrown | #BC8F8F | rgb(188,143,143) |
| SandyBrown | #F4A460 | rgb(244,164,96) |
| Goldenrod | #DAA520 | rgb(218,165,32) |
| DarkGoldenrod | #B8860B | rgb(184,134,11) |
| Peru | #CD853F | rgb(205,133,63) |
| Chocolate | #D2691E | rgb(210,105,30) |
| SaddleBrown | #8B4513 | rgb(139,69,19) |
| Sienna | #A0522D | rgb(160,82,45) |
| Brown | #A52A2A | rgb(165,42,42) |
| Maroon | #800000 | rgb(128,0,0) |
| WHITE CSS COLOR CODES | ||
| White | #FFFFFF | rgb(255,255,255) |
| Snow | #FFFAFA | rgb(255,250,250) |
| Honeydew | #F0FFF0 | rgb(240,255,240) |
| MintCream | #F5FFFA | rgb(245,255,250) |
| Azure | #F0FFFF | rgb(240,255,255) |
| AliceBlue | #F0F8FF | rgb(240,248,255) |
| GhostWhite | #F8F8FF | rgb(248,248,255) |
| WhiteSmoke | #F5F5F5 | rgb(245,245,245) |
| Seashell | #FFF5EE | rgb(255,245,238) |
| Beige | #F5F5DC | rgb(245,245,220) |
| OldLace | #FDF5E6 | rgb(253,245,230) |
| FloralWhite | #FFFAF0 | rgb(255,250,240) |
| Ivory | #FFFFF0 | rgb(255,255,240) |
| AntiqueWhite | #FAEBD7 | rgb(250,235,215) |
| Linen | #FAF0E6 | rgb(250,240,230) |
| LavenderBlush | #FFF0F5 | rgb(255,240,245) |
| MistyRose | #FFE4E1 | rgb(255,228,225) |
| GREY CSS COLOR CODES | ||
| Gainsboro | #DCDCDC | rgb(220,220,220) |
| LightGray | #D3D3D3 | rgb(211,211,211) |
| LightGrey | #D3D3D3 | rgb(211,211,211) |
| Silver | #C0C0C0 | rgb(192,192,192) |
| DarkGray | #A9A9A9 | rgb(169,169,169) |
| DarkGrey | #A9A9A9 | rgb(169,169,169) |
| Gray | #808080 | rgb(128,128,128) |
| Grey | #808080 | rgb(128,128,128) |
| DimGray | #696969 | rgb(105,105,105) |
| DimGrey | #696969 | rgb(105,105,105) |
| LightSlateGray | #778899 | rgb(119,136,153) |
| LightSlateGrey | #778899 | rgb(119,136,153) |
| SlateGray | #708090 | rgb(112,128,144) |
| SlateGrey | #708090 | rgb(112,128,144) |
| DarkSlateGray | #2F4F4F | rgb(47,79,79) |
| DarkSlateGrey | #2F4F4F | rgb(47,79,79) |
| Black | #000000 | rgb(0,0,0) |
CSS gradients allow you to create smooth transitions between multiple colors, enhancing the visual appeal of your designs. There are two types of gradients: linear and radial.
Transition colors along a straight line. The syntax for linear gradients is linear-gradient(direction, color-stop1, color-stop2, ...). For example, background-image: linear-gradient(to right, red, orange); creates a gradient from red to orange.
Transition colors in a circular pattern. The syntax for radial gradients is radial-gradient(shape size at position, color-stop1, color-stop2, ...). For example, `background-image: radial-gradient(circle at center, red, orange);` creates a circular gradient from red to orange.
Color code conversion tools help you easily switch between formats, ensuring compatibility and ease of use. Some popular online tools include color pickers, HEX to RGB converters, and HSL to RGB converters.
Browser developer tools like Chrome DevTools or Firefox Developer Edition also offer built-in color pickers with conversion options.
Color contrast plays a crucial role in web accessibility, ensuring content is readable for all users, including those with visual impairments. Follow these best practices for accessible color usage:
Choose high-contrast color combinations to improve legibility.
Avoid using color as the only way to convey information.
Test your designs using color contrast ratio tools to meet accessibility guidelines.
To learn more about color contrast and accessibility, explore our color theory.
Selecting the right colors can significantly impact user experience. Consider the following tips:
Understand color meanings and their psychological effects on users. Visit our color meanings guide for more information.
Balance color harmony and contrast to create aesthetically pleasing designs.
Use our popular color scheme resources, such as Color Picker or Random Color Generator, to find inspiration and create harmonious palettes.
The different CSS color code types include HEX, RGB, HSL, and Named Colors.
Use online color conversion tools or browser developer tools to convert HEX color codes to RGB.
HSLA includes an alpha channel for transparency, while HSL does not.
Color contrast ensures readability for all users, including those with visual impairments.