Hex is compact
Hex values are concise and common in design tools, CSS variables, and brand palettes.
Web Colors
HTML color codes and color converter
HTML and CSS colors are commonly written as hexadecimal triplets, RGB values, HSL values, or named colors.Practical Notes
Color Code Decisions
Hex, RGB, HSL, and named colors can describe the same visual color. Choose the format that makes editing, theming, and handoff easiest.RGB fits opacity
RGB and modern rgb() syntax are convenient when you need alpha transparency.
HSL is adjustable
HSL makes it easier to tune hue, saturation, and lightness for hover states and accessible contrast.
HTML Color Codes
Browse common HTML color codes and convert between hex, RGB, and HSL color formats.
HTML Color codes are triple hexadecimal numbers each representing red, green and blue (RGB) colors. The mixture of red, green and blue colors make up a HTML color, and each color can be used in foreground or background in texts, borders and HTML elements. The HTML color codes are represented with # (pound) to denote hexadecimal followed by 3-hexa numbers (i.e. #RRGGBB). The #FF0000 represents Red, #00FF00 represents Green, #0000FF represents Blue and mixture of those numbers make up a color.
Color Picker
HEX
#8e3535
RGB
(214, 137, 16)HSL
(37, 86%, 45%)Inspect a color by entering a color code:
Bootstrap Alert Color Codes
Primary (#3B71CA)
Secondary (#9FA6B2)
Success (#14A44D)
Danger (#DC4C64)
Warning (#E4A11B)
Info (#54B4D3)
Light (#FBFBFB)
Dark (#332D2D)
List of common HTML color codes
Here is a list of some of the most popular HTML colors and their codes. Some HTML color codes can be represented with names.
| Color | Name | HEX | RGB |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | |
| Gray | #808080 | rgb(128, 128, 128) | |
| Black | #000000 | rgb(0, 0, 0) | |
| Red | #FF0000 | rgb(255, 0, 0) | |
| Maroon | #800000 | rgb(128,0,0) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | |
| Olive | #808000 | rgb(128, 128, 0) | |
| Lime | #00FF00 | rgb(0, 255, 0) | |
| Green | #008000 | rgb(0, 128, 0) | |
| Aqua | #00FFFF | rgb(0, 255, 255) | |
| Teal | #008080 | rgb(0, 128, 128) | |
| Blue | #0000FF | rgb(0, 0, 255) | |
| Navy | #000080 | rgb(0, 0, 128) | |
| Fuchsia | #FF00FF | rgb(255, 0, 255) | |
| Purple | #800080 | rgb(128, 0, 128) |
List of common Bootstrap Color Codes
Bootstrap is a popular front-end framework for web development that provides a set of pre-designed CSS and JavaScript components to help developers create responsive and visually appealing web pages. Bootstrap includes a predefined set of color classes that you can use to apply various color schemes to your web elements. These color classes are typically used with text, backgrounds, buttons, and other design elements.
| Color | Name | HEX | RGB | HSL |
|---|---|---|---|---|
| Black (SYSTEM) | #000000 | rgb(0,0,0) | hsl(0,0%,0%) | |
| Maroon (SYSTEM) | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | |
| Green (SYSTEM) | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | |
| Olive (SYSTEM) | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | |
| Navy (SYSTEM) | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | |
| Purple (SYSTEM) | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | |
| Teal (SYSTEM) | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | |
| Silver (SYSTEM) | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | |
| Grey (SYSTEM) | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | |
| Red (SYSTEM) | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) | |
| Lime (SYSTEM) | #00ff00 | rgb(0,255,0) | hsl(120,100%,50%) | |
| Yellow (SYSTEM) | #ffff00 | rgb(255,255,0) | hsl(60,100%,50%) | |
| Blue (SYSTEM) | #0000ff | rgb(0,0,255) | hsl(240,100%,50%) | |
| Fuchsia (SYSTEM) | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) | |
| Aqua (SYSTEM) | #00ffff | rgb(0,255,255) | hsl(180,100%,50%) | |
| White (SYSTEM) | #ffffff | rgb(255,255,255) | hsl(0,0%,100%) | |
| Grey0 | #000000 | rgb(0,0,0) | hsl(0,0%,0%) | |
| NavyBlue | #00005f | rgb(0,0,95) | hsl(240,100%,18%) | |
| DarkBlue | #000087 | rgb(0,0,135) | hsl(240,100%,26%) | |
| Blue3 | #0000af | rgb(0,0,175) | hsl(240,100%,34%) | |
| Blue3 | #0000d7 | rgb(0,0,215) | hsl(240,100%,42%) | |
| Blue1 | #0000ff | rgb(0,0,255) | hsl(240,100%,50%) | |
| DarkGreen | #005f00 | rgb(0,95,0) | hsl(120,100%,18%) | |
| DeepSkyBlue4 | #005f5f | rgb(0,95,95) | hsl(180,100%,18%) | |
| DeepSkyBlue4 | #005f87 | rgb(0,95,135) | hsl(97,100%,26%) | |
| DeepSkyBlue4 | #005faf | rgb(0,95,175) | hsl(07,100%,34%) | |
| DodgerBlue3 | #005fd7 | rgb(0,95,215) | hsl(13,100%,42%) | |
| DodgerBlue2 | #005fff | rgb(0,95,255) | hsl(17,100%,50%) | |
| Green4 | #008700 | rgb(0,135,0) | hsl(120,100%,26%) | |
| SpringGreen4 | #00875f | rgb(0,135,95) | hsl(62,100%,26%) | |
| Turquoise4 | #008787 | rgb(0,135,135) | hsl(180,100%,26%) | |
| DeepSkyBlue3 | #0087af | rgb(0,135,175) | hsl(93,100%,34%) | |
| DeepSkyBlue3 | #0087d7 | rgb(0,135,215) | hsl(02,100%,42%) | |
| DodgerBlue1 | #0087ff | rgb(0,135,255) | hsl(08,100%,50%) | |
| Green3 | #00af00 | rgb(0,175,0) | hsl(120,100%,34%) | |
| SpringGreen3 | #00af5f | rgb(0,175,95) | hsl(52,100%,34%) | |
| DarkCyan | #00af87 | rgb(0,175,135) | hsl(66,100%,34%) | |
| LightSeaGreen | #00afaf | rgb(0,175,175) | hsl(180,100%,34%) | |
| DeepSkyBlue2 | #00afd7 | rgb(0,175,215) | hsl(91,100%,42%) | |
| DeepSkyBlue1 | #00afff | rgb(0,175,255) | hsl(98,100%,50%) | |
| Green3 | #00d700 | rgb(0,215,0) | hsl(120,100%,42%) | |
| SpringGreen3 | #00d75f | rgb(0,215,95) | hsl(46,100%,42%) | |
| SpringGreen2 | #00d787 | rgb(0,215,135) | hsl(57,100%,42%) | |
| Cyan3 | #00d7af | rgb(0,215,175) | hsl(68,100%,42%) | |
| DarkTurquoise | #00d7d7 | rgb(0,215,215) | hsl(180,100%,42%) | |
| Turquoise2 | #00d7ff | rgb(0,215,255) | hsl(89,100%,50%) | |
| Green1 | #00ff00 | rgb(0,255,0) | hsl(120,100%,50%) | |
| SpringGreen2 | #00ff5f | rgb(0,255,95) | hsl(42,100%,50%) | |
| SpringGreen1 | #00ff87 | rgb(0,255,135) | hsl(51,100%,50%) | |
| MediumSpringGreen | #00ffaf | rgb(0,255,175) | hsl(61,100%,50%) | |
| Cyan2 | #00ffd7 | rgb(0,255,215) | hsl(70,100%,50%) | |
| Cyan1 | #00ffff | rgb(0,255,255) | hsl(180,100%,50%) | |
| DarkRed | #5f0000 | rgb(95,0,0) | hsl(0,100%,18%) | |
| DeepPink4 | #5f005f | rgb(95,0,95) | hsl(300,100%,18%) | |
| Purple4 | #5f0087 | rgb(95,0,135) | hsl(82,100%,26%) | |
| Purple4 | #5f00af | rgb(95,0,175) | hsl(72,100%,34%) | |
| Purple3 | #5f00d7 | rgb(95,0,215) | hsl(66,100%,42%) | |
| BlueViolet | #5f00ff | rgb(95,0,255) | hsl(62,100%,50%) | |
| Orange4 | #5f5f00 | rgb(95,95,0) | hsl(60,100%,18%) | |
| Grey37 | #5f5f5f | rgb(95,95,95) | hsl(0,0%,37%) | |
| MediumPurple4 | #5f5f87 | rgb(95,95,135) | hsl(240,17%,45%) | |
| SlateBlue3 | #5f5faf | rgb(95,95,175) | hsl(240,33%,52%) | |
| SlateBlue3 | #5f5fd7 | rgb(95,95,215) | hsl(240,60%,60%) | |
| RoyalBlue1 | #5f5fff | rgb(95,95,255) | hsl(240,100%,68%) | |
| Chartre use4 | #5f8700 | rgb(95,135,0) | hsl(7,100%,26%) | |
| DarkSeaGreen4 | #5f875f | rgb(95,135,95) | hsl(120,17%,45%) | |
| PaleTurquoise4 | #5f8787 | rgb(95,135,135) | hsl(180,17%,45%) | |
| SteelBlue | #5f87af | rgb(95,135,175) | hsl(210,33%,52%) | |
| SteelBlue3 | #5f87d7 | rgb(95,135,215) | hsl(220,60%,60%) | |
| CornflowerBlue | #5f87ff | rgb(95,135,255) | hsl(225,100%,68%) | |
| Chartre use3 | #5faf00 | rgb(95,175,0) | hsl(7,100%,34%) | |
| DarkSeaGreen4 | #5faf5f | rgb(95,175,95) | hsl(120,33%,52%) | |
| CadetBlue | #5faf87 | rgb(95,175,135) | hsl(150,33%,52%) | |
| CadetBlue | #5fafaf | rgb(95,175,175) | hsl(180,33%,52%) | |
| SkyBlue3 | #5fafd7 | rgb(95,175,215) | hsl(200,60%,60%) | |
| SteelBlue1 | #5fafff | rgb(95,175,255) | hsl(210,100%,68%) | |
| Chartre use3 | #5fd700 | rgb(95,215,0) | hsl(3,100%,42%) | |
| PaleGreen3 | #5fd75f | rgb(95,215,95) | hsl(120,60%,60%) | |
| SeaGreen3 | #5fd787 | rgb(95,215,135) | hsl(140,60%,60%) | |
| Aquamarine3 | #5fd7af | rgb(95,215,175) | hsl(160,60%,60%) | |
| MediumTurquoise | #5fd7d7 | rgb(95,215,215) | hsl(180,60%,60%) | |
| SteelBlue1 | #5fd7ff | rgb(95,215,255) | hsl(195,100%,68%) | |
| Chartre use2 | #5fff00 | rgb(95,255,0) | hsl(7,100%,50%) | |
| SeaGreen2 | #5fff5f | rgb(95,255,95) | hsl(120,100%,68%) | |
| SeaGreen1 | #5fff87 | rgb(95,255,135) | hsl(135,100%,68%) | |
| SeaGreen1 | #5fffaf | rgb(95,255,175) | hsl(150,100%,68%) | |
| Aquamarine1 | #5fffd7 | rgb(95,255,215) | hsl(165,100%,68%) | |
| DarkSlateGray2 | #5fffff | rgb(95,255,255) | hsl(180,100%,68%) | |
| DarkRed | #870000 | rgb(135,0,0) | hsl(0,100%,26%) | |
| DeepPink4 | #87005f | rgb(135,0,95) | hsl(17,100%,26%) | |
| DarkMagenta | #870087 | rgb(135,0,135) | hsl(300,100%,26%) | |
| DarkMagenta | #8700af | rgb(135,0,175) | hsl(86,100%,34%) | |
| DarkViolet | #8700d7 | rgb(135,0,215) | hsl(77,100%,42%) | |
| Purple | #8700ff | rgb(135,0,255) | hsl(71,100%,50%) | |
| Orange4 | #875f00 | rgb(135,95,0) | hsl(2,100%,26%) | |
| LightPink4 | #875f5f | rgb(135,95,95) | hsl(0,17%,45%) | |
| Plum4 | #875f87 | rgb(135,95,135) | hsl(300,17%,45%) | |
| MediumPurple3 | #875faf | rgb(135,95,175) | hsl(270,33%,52%) | |
| MediumPurple3 | #875fd7 | rgb(135,95,215) | hsl(260,60%,60%) | |
| SlateBlue1 | #875fff | rgb(135,95,255) | hsl(255,100%,68%) | |
| Yellow4 | #878700 | rgb(135,135,0) | hsl(60,100%,26%) | |
| Wheat4 | #87875f | rgb(135,135,95) | hsl(60,17%,45%) | |
| Grey53 | #878787 | rgb(135,135,135) | hsl(0,0%,52%) | |
| LightSlateGrey | #8787af | rgb(135,135,175) | hsl(240,20%,60%) | |
| MediumPurple | #8787d7 | rgb(135,135,215) | hsl(240,50%,68%) | |
| LightSlateBlue | #8787ff | rgb(135,135,255) | hsl(240,100%,76%) | |
| Yellow4 | #87af00 | rgb(135,175,0) | hsl(3,100%,34%) | |
| DarkOliveGreen3 | #87af5f | rgb(135,175,95) | hsl(90,33%,52%) | |
| DarkSeaGreen | #87af87 | rgb(135,175,135) | hsl(120,20%,60%) | |
| LightSkyBlue3 | #87afaf | rgb(135,175,175) | hsl(180,20%,60%) | |
| LightSkyBlue3 | #87afd7 | rgb(135,175,215) | hsl(210,50%,68%) | |
| SkyBlue2 | #87afff | rgb(135,175,255) | hsl(220,100%,76%) | |
| Chartreuse2 | #87d700 | rgb(135,215,0) | hsl(2,100%,42%) | |
| DarkOliveGreen3 | #87d75f | rgb(135,215,95) | hsl(100,60%,60%) | |
| PaleGreen3 | #87d787 | rgb(135,215,135) | hsl(120,50%,68%) | |
| DarkSeaGreen3 | #87d7af | rgb(135,215,175) | hsl(150,50%,68%) | |
| DarkSlateGray3 | #87d7d7 | rgb(135,215,215) | hsl(180,50%,68%) | |
| SkyBlue1 | #87d7ff | rgb(135,215,255) | hsl(200,100%,76%) | |
| Chartreuse1 | #87ff00 | rgb(135,255,0) | hsl(8,100%,50%) | |
| LightGreen | #87ff5f | rgb(135,255,95) | hsl(105,100%,68%) | |
| LightGreen | #87ff87 | rgb(135,255,135) | hsl(120,100%,76%) | |
| PaleGreen1 | #87ffaf | rgb(135,255,175) | hsl(140,100%,76%) | |
| Aquamarine1 | #87ffd7 | rgb(135,255,215) | hsl(160,100%,76%) | |
| DarkSlateGray1 | #87ffff | rgb(135,255,255) | hsl(180,100%,76%) | |
| Red3 | #af0000 | rgb(175,0,0) | hsl(0,100%,34%) | |
| DeepPink4 | #af005f | rgb(175,0,95) | hsl(27,100%,34%) | |
| MediumVioletRed | #af0087 | rgb(175,0,135) | hsl(13,100%,34%) | |
| Magenta3 | #af00af | rgb(175,0,175) | hsl(300,100%,34%) | |
| DarkViolet | #af00d7 | rgb(175,0,215) | hsl(88,100%,42%) | |
| Purple | #af00ff | rgb(175,0,255) | hsl(81,100%,50%) | |
| DarkOrange3 | #af5f00 | rgb(175,95,0) | hsl(2,100%,34%) | |
| IndianRed | #af5f5f | rgb(175,95,95) | hsl(0,33%,52%) | |
| HotPink3 | #af5f87 | rgb(175,95,135) | hsl(330,33%,52%) | |
| MediumOrchid3 | #af5faf | rgb(175,95,175) | hsl(300,33%,52%) | |
| MediumOrchid | #af5fd7 | rgb(175,95,215) | hsl(280,60%,60%) | |
| MediumPurple2 | #af5fff | rgb(175,95,255) | hsl(270,100%,68%) | |
| DarkGoldenrod | #af8700 | rgb(175,135,0) | hsl(6,100%,34%) | |
| LightSalmon3 | #af875f | rgb(175,135,95) | hsl(30,33%,52%) | |
| RosyBrown | #af8787 | rgb(175,135,135) | hsl(0,20%,60%) | |
| Grey63 | #af87af | rgb(175,135,175) | hsl(300,20%,60%) | |
| MediumPurple2 | #af87d7 | rgb(175,135,215) | hsl(270,50%,68%) | |
| MediumPurple1 | #af87ff | rgb(175,135,255) | hsl(260,100%,76%) | |
| Gold3 | #afaf00 | rgb(175,175,0) | hsl(60,100%,34%) | |
| DarkKhaki | #afaf5f | rgb(175,175,95) | hsl(60,33%,52%) | |
| NavajoWhite3 | #afaf87 | rgb(175,175,135) | hsl(60,20%,60%) | |
| Grey69 | #afafaf | rgb(175,175,175) | hsl(0,0%,68%) | |
| LightSteelBlue3 | #afafd7 | rgb(175,175,215) | hsl(240,33%,76%) | |
| LightSteelBlue | #afafff | rgb(175,175,255) | hsl(240,100%,84%) | |
| Yellow3 | #afd700 | rgb(175,215,0) | hsl(1,100%,42%) | |
| DarkOliveGreen3 | #afd75f | rgb(175,215,95) | hsl(80,60%,60%) | |
| DarkSeaGreen3 | #afd787 | rgb(175,215,135) | hsl(90,50%,68%) | |
| DarkSeaGreen2 | #afd7af | rgb(175,215,175) | hsl(120,33%,76%) | |
| LightCyan3 | #afd7d7 | rgb(175,215,215) | hsl(180,33%,76%) | |
| LightSkyBlue1 | #afd7ff | rgb(175,215,255) | hsl(210,100%,84%) | |
| GreenYellow | #afff00 | rgb(175,255,0) | hsl(8,100%,50%) | |
| DarkOliveGreen2 | #afff5f | rgb(175,255,95) | hsl(90,100%,68%) | |
| PaleGreen1 | #afff87 | rgb(175,255,135) | hsl(100,100%,76%) | |
| DarkSeaGreen2 | #afffaf | rgb(175,255,175) | hsl(120,100%,84%) | |
| DarkSeaGreen1 | #afffd7 | rgb(175,255,215) | hsl(150,100%,84%) | |
| PaleTurquoise1 | #afffff | rgb(175,255,255) | hsl(180,100%,84%) | |
| Red3 | #d70000 | rgb(215,0,0) | hsl(0,100%,42%) | |
| DeepPink3 | #d7005f | rgb(215,0,95) | hsl(33,100%,42%) | |
| DeepPink3 | #d70087 | rgb(215,0,135) | hsl(22,100%,42%) | |
| Magenta3 | #d700af | rgb(215,0,175) | hsl(11,100%,42%) | |
| Magenta3 | #d700d7 | rgb(215,0,215) | hsl(300,100%,42%) | |
| Magenta2 | #d700ff | rgb(215,0,255) | hsl(90,100%,50%) | |
| DarkOrange3 | #d75f00 | rgb(215,95,0) | hsl(6,100%,42%) | |
| IndianRed | #d75f5f | rgb(215,95,95) | hsl(0,60%,60%) | |
| HotPink3 | #d75f87 | rgb(215,95,135) | hsl(340,60%,60%) | |
| HotPink2 | #d75faf | rgb(215,95,175) | hsl(320,60%,60%) | |
| Orchid | #d75fd7 | rgb(215,95,215) | hsl(300,60%,60%) | |
| MediumOrchid1 | #d75fff | rgb(215,95,255) | hsl(285,100%,68%) | |
| Orange3 | #d78700 | rgb(215,135,0) | hsl(7,100%,42%) | |
| LightSalmon3 | #d7875f | rgb(215,135,95) | hsl(20,60%,60%) | |
| LightPink3 | #d78787 | rgb(215,135,135) | hsl(0,50%,68%) | |
| Pink3 | #d787af | rgb(215,135,175) | hsl(330,50%,68%) | |
| Plum3 | #d787d7 | rgb(215,135,215) | hsl(300,50%,68%) | |
| Violet | #d787ff | rgb(215,135,255) | hsl(280,100%,76%) | |
| Gold3 | #d7af00 | rgb(215,175,0) | hsl(8,100%,42%) | |
| LightGoldenrod3 | #d7af5f | rgb(215,175,95) | hsl(40,60%,60%) | |
| Tan | #d7af87 | rgb(215,175,135) | hsl(30,50%,68%) | |
| MistyRose3 | #d7afaf | rgb(215,175,175) | hsl(0,33%,76%) | |
| Thistle3 | #d7afd7 | rgb(215,175,215) | hsl(300,33%,76%) | |
| Plum2 | #d7afff | rgb(215,175,255) | hsl(270,100%,84%) | |
| Yellow3 | #d7d700 | rgb(215,215,0) | hsl(60,100%,42%) | |
| Khaki3 | #d7d75f | rgb(215,215,95) | hsl(60,60%,60%) | |
| LightGoldenrod2 | #d7d787 | rgb(215,215,135) | hsl(60,50%,68%) | |
| LightYellow3 | #d7d7af | rgb(215,215,175) | hsl(60,33%,76%) | |
| Grey84 | #d7d7d7 | rgb(215,215,215) | hsl(0,0%,84%) | |
| LightSteelBlue1 | #d7d7ff | rgb(215,215,255) | hsl(240,100%,92%) | |
| Yellow2 | #d7ff00 | rgb(215,255,0) | hsl(9,100%,50%) | |
| DarkOliveGreen1 | #d7ff5f | rgb(215,255,95) | hsl(75,100%,68%) | |
| DarkOliveGreen1 | #d7ff87 | rgb(215,255,135) | hsl(80,100%,76%) | |
| DarkSeaGreen1 | #d7ffaf | rgb(215,255,175) | hsl(90,100%,84%) | |
| Honeydew2 | #d7ffd7 | rgb(215,255,215) | hsl(120,100%,92%) | |
| LightCyan1 | #d7ffff | rgb(215,255,255) | hsl(180,100%,92%) | |
| Red1 | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) | |
| DeepPink2 | #ff005f | rgb(255,0,95) | hsl(37,100%,50%) | |
| DeepPink1 | #ff0087 | rgb(255,0,135) | hsl(28,100%,50%) | |
| DeepPink1 | #ff00af | rgb(255,0,175) | hsl(18,100%,50%) | |
| Magenta2 | #ff00d7 | rgb(255,0,215) | hsl(09,100%,50%) | |
| Magenta1 | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) | |
| OrangeRed1 | #ff5f00 | rgb(255,95,0) | hsl(2,100%,50%) | |
| IndianRed1 | #ff5f5f | rgb(255,95,95) | hsl(0,100%,68%) | |
| IndianRed1 | #ff5f87 | rgb(255,95,135) | hsl(345,100%,68%) | |
| HotPink | #ff5faf | rgb(255,95,175) | hsl(330,100%,68%) | |
| HotPink | #ff5fd7 | rgb(255,95,215) | hsl(315,100%,68%) | |
| MediumOrchid1 | #ff5fff | rgb(255,95,255) | hsl(300,100%,68%) | |
| DarkOrange | #ff8700 | rgb(255,135,0) | hsl(1,100%,50%) | |
| Salmon1 | #ff875f | rgb(255,135,95) | hsl(15,100%,68%) | |
| LightCoral | #ff8787 | rgb(255,135,135) | hsl(0,100%,76%) | |
| PaleVioletRe d1 | #ff87af | rgb(255,135,175) | hsl(340,100%,76%) | |
| Orchid2 | #ff87d7 | rgb(255,135,215) | hsl(320,100%,76%) | |
| Orchid1 | #ff87ff | rgb(255,135,255) | hsl(300,100%,76%) | |
| Orange1 | #ffaf00 | rgb(255,175,0) | hsl(1,100%,50%) | |
| SandyBrown | #ffaf5f | rgb(255,175,95) | hsl(30,100%,68%) | |
| LightSalmon1 | #ffaf87 | rgb(255,175,135) | hsl(20,100%,76%) | |
| LightPink1 | #ffafaf | rgb(255,175,175) | hsl(0,100%,84%) | |
| Pink1 | #ffafd7 | rgb(255,175,215) | hsl(330,100%,84%) | |
| Plum1 | #ffafff | rgb(255,175,255) | hsl(300,100%,84%) | |
| Gold1 | #ffd700 | rgb(255,215,0) | hsl(0,100%,50%) | |
| LightGoldenrod2 | #ffd75f | rgb(255,215,95) | hsl(45,100%,68%) | |
| LightGoldenrod2 | #ffd787 | rgb(255,215,135) | hsl(40,100%,76%) | |
| NavajoWhite1 | #ffd7af | rgb(255,215,175) | hsl(30,100%,84%) | |
| MistyRose1 | #ffd7d7 | rgb(255,215,215) | hsl(0,100%,92%) | |
| Thistle1 | #ffd7ff | rgb(255,215,255) | hsl(300,100%,92%) | |
| Yellow1 | #ffff00 | rgb(255,255,0) | hsl(60,100%,50%) | |
| LightGoldenrod1 | #ffff5f | rgb(255,255,95) | hsl(60,100%,68%) | |
| Khaki1 | #ffff87 | rgb(255,255,135) | hsl(60,100%,76%) | |
| Wheat1 | #ffffaf | rgb(255,255,175) | hsl(60,100%,84%) | |
| Cornsilk1 | #ffffd7 | rgb(255,255,215) | hsl(60,100%,92%) | |
| Grey100 | #ffffff | rgb(255,255,255) | hsl(0,0%,100%) | |
| Grey3 | #080808 | rgb(8,8,8) | hsl(0,0%,3%) | |
| Grey7 | #121212 | rgb(18,18,18) | hsl(0,0%,7%) | |
| Grey11 | #1c1c1c | rgb(28,28,28) | hsl(0,0%,10%) | |
| Grey15 | #262626 | rgb(38,38,38) | hsl(0,0%,14%) | |
| Grey19 | #303030 | rgb(48,48,48) | hsl(0,0%,18%) | |
| Grey23 | #3a3a3a | rgb(58,58,58) | hsl(0,0%,22%) | |
| Grey27 | #444444 | rgb(68,68,68) | hsl(0,0%,26%) | |
| Grey30 | #4e4e4e | rgb(78,78,78) | hsl(0,0%,30%) | |
| Grey35 | #585858 | rgb(88,88,88) | hsl(0,0%,34%) | |
| Grey39 | #626262 | rgb(98,98,98) | hsl(0,0%,37%) | |
| Grey42 | #6c6c6c | rgb(108,108,108) | hsl(0,0%,40%) | |
| Grey46 | #767676 | rgb(118,118,118) | hsl(0,0%,46%) | |
| Grey50 | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | |
| Grey54 | #8a8a8a | rgb(138,138,138) | hsl(0,0%,54%) | |
| Grey58 | #949494 | rgb(148,148,148) | hsl(0,0%,58%) | |
| Grey62 | #9e9e9e | rgb(158,158,158) | hsl(0,0%,61%) | |
| Grey66 | #a8a8a8 | rgb(168,168,168) | hsl(0,0%,65%) | |
| Grey70 | #b2b2b2 | rgb(178,178,178) | hsl(0,0%,69%) | |
| Grey74 | #bcbcbc | rgb(188,188,188) | hsl(0,0%,73%) | |
| Grey78 | #c6c6c6 | rgb(198,198,198) | hsl(0,0%,77%) | |
| Grey82 | #d0d0d0 | rgb(208,208,208) | hsl(0,0%,81%) | |
| Grey85 | #dadada | rgb(218,218,218) | hsl(0,0%,85%) | |
| Grey89 | #e4e4e4 | rgb(228,228,228) | hsl(0,0%,89%) | |
| Grey93 | #eeeeee | rgb(238,238,238) | hsl(0,0%,93%) |
Bootstrap color classes
Bootstrap is a widely used open-source front-end web development framework created by Twitter developers Mark Otto and Jacob Thornton. It was first released in 2011 and has since become one of the most popular frameworks for building responsive and visually appealing websites and web applications.
Here are some of the commonly used Bootstrap color classes:
Text Colors
- text-primary: Sets the text color to the primary theme color.
- text-secondary: Sets the text color to the secondary theme color.
- text-success: Sets the color to the success color.
- text-danger: Sets the color to the critical error color.
- text-warning: Sets the color to the warning color.
- text-info: Sets the text color to various contextual colors.
Background Colors
- bg-primary: Sets the background color to the primary theme color.
- bg-secondary: Sets the background color to the secondary theme color.
- bg-success, bg-danger, bg-warning, bg-info: Sets the background color to various contextual colors.
Button Colors
- btn-primary: Applies the primary theme color to a button.
- btn-secondary: Applies the secondary theme color to a button.
- btn-success, btn-danger, btn-warning, btn-info: Applies various contextual colors to buttons.
Alert Colors
- alert-primary: Sets the color for a primary themed alert box.
- alert-secondary: Sets the color for a secondary themed alert box.
- alert-success, alert danger, alert warning, alert info: Sets colors for various contextual alert boxes.
The above Bootstrap color classes make it easy to maintain a consistent and visually appealing design by using Bootstrap's predefined color palette.