COLORS

Modified: 2025-01-13

List of main colors and their different values.

⚠️ Please disable Dark Reader on this page!

MONOCHROME
Black #000000 rgb(000 000 000) hsl(000 000 000) oklch(0 0 0) Gray 05 #0d0d0d rgb(013 013 013) hsl(000 000 005) oklch(0.1591 0 0) Gray 10 #1a1a1a rgb(026 026 026) hsl(000 000 010) oklch(0.2178 0 0) Gray 15 #262626 rgb(038 038 038) hsl(000 000 015) oklch(0.2686 0 0) Gray 20 #333333 rgb(051 051 051) hsl(000 000 020) oklch(0.3211 0 0) Gray 25 #404040 rgb(064 064 064) hsl(000 000 025) oklch(0.3715 0 0) Gray 30 #4d4d4d rgb(077 077 077) hsl(000 000 030) oklch(0.4202 0 0) Gray 35 #595959 rgb(089 089 089) hsl(000 000 035) oklch(0.464 0 0) Gray 40 #666666 rgb(102 102 102) hsl(000 000 040) oklch(0.5103 0 0) Gray 45 #737373 rgb(115 115 115) hsl(000 000 045) oklch(0.5555 0 0) Gray 50 #808080 rgb(128 128 128) hsl(000 000 050) oklch(0.5999 0 0) Gray 55 #8c8c8c rgb(140 140 140) hsl(000 000 055) oklch(0.6401 0 0) Gray 60 #999999 rgb(153 153 153) hsl(000 000 060) oklch(0.683 0 0) Gray 65 #a6a6a6 rgb(166 166 166) hsl(000 000 065) oklch(0.7252 0 0) Gray 70 #b3b3b3 rgb(179 179 179) hsl(000 000 070) oklch(0.7668 0 0) Gray 75 #bfbfbf rgb(191 191 191) hsl(000 000 075) oklch(0.8047 0 0) Gray 80 #cccccc rgb(204 204 204) hsl(000 000 080) oklch(0.8452 0 0) Gray 85 #d9d9d9 rgb(217 217 217) hsl(000 000 085) oklch(0.8853 0 0) Gray 90 #e6e6e6 rgb(230 230 230) hsl(000 000 090) oklch(0.9249 0 0) Gray 95 #f2f2f2 rgb(242 242 242) hsl(000 000 095) oklch(0.9612 0 0) White #ffffff rgb(255 255 255) hsl(000 000 100) oklch(1 0 0)
HUE
Red #ff0000 rgb(255 000 000) hsl(000 100 050) oklch(0.628 0.2577 29.23) Orange #ff8000 rgb(255 128 000) hsl(030 100 050) oklch(0.7319 0.1858 52.98) Yellow #ffff00 rgb(255 255 000) hsl(060 100 050) oklch(0.968 0.211 109.77) Chartreuse #80ff00 rgb(128 255 000) hsl(090 100 050) oklch(0.8907 0.264361 135.8924) Green #00ff00 rgb(000 255 000) hsl(120 100 050) oklch(0.8664 0.294827 142.4953) Spring #00ff80 rgb(000 255 128) hsl(150 100 050) oklch(0.8751 0.23444 151.1848) Cyan #00ffff rgb(000 255 255) hsl(180 100 050) oklch(0.9054 0.15455 194.769) Azure #0080ff rgb(000 128 255) hsl(210 100 050) oklch(0.6152 0.2108 256.1) Blue #0000ff rgb(000 000 255) hsl(240 100 050) oklch(0.452 0.313214 264.052) Violet #8000ff rgb(128 000 255) hsl(270 10% 050) oklch(0.5305 0.2931 293.94) Magenta #ff00ff rgb(255 000 255) hsl(300 100 050) oklch(0.7017 0.3225 328.36) Rose #ff0080 rgb(255 000 128) hsl(330 100 050) oklch(0.6453 0.2603 2.47)
HSL COLOR PALETTE, % = HSL Lightness
05% 10% 15% 20% 25% 30% 35% 40% 45% 50% 55% 60% 65% 70% 75% 80% 85% 90% 95% ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​
OKLCH COLOR PALETTE WITH 50% CHROMA, % = OKLCH Lightness
05% 10% 15% 20% 25% 30% 35% 40% 45% 50% 55% 60% 65% 70% 75% 80% 85% 90% 95% ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

OKLCH is a modern CSS color function that defines colors using three perceptually uniform components: Lightness (L), Chroma (C), and Hue (H) within the Oklab color space. It is designed to align closely with how humans perceive color, offering more consistent and predictable results compared to older models like HSL or sRGB. Lightness ranges from 0% (black) to 100% (white), representing perceived brightness , while Chroma controls the vividness or intensity of the color, typically ranging from 0 (gray) to about 0.5 in practice. Hue is measured in degrees from 0° to 360°, defining the color’s position on the color wheel, such as red at 0°, blue at 240°, and purple at 320°.

One of the key advantages of OKLCH is its perceptual uniformity—changes in values correspond directly to how the human eye perceives color shifts, avoiding issues like unexpected gray tones in gradients that can occur with other models. It supports a wider color gamut, including Display P3 colors, which allows for more vibrant and accurate representation on modern displays. Unlike the older LCH color space, OKLCH avoids undesirable hue shifts when adjusting lightness or chroma, making it ideal for creating consistent color palettes and smooth transitions.

OKLCH is part of the CSS Color Module Level 4 specification and is supported in modern browsers like Chrome, Edge, Firefox, and Safari since May 2023. It can be used with relative color syntax, allowing developers to modify existing colors dynamically using the from keyword, and supports transparency via an optional alpha channel. For example, oklch(70% 0.15 240) defines a soft blue, and oklch(60% 0.2 280 / 75%) creates a vibrant purple with 75% opacity.

COLOR PALETTE RAINBOW

The rainbow has no definite number of physical colours, but seven are traditionally listed. Below is a commonly used list of seven colors in the order seen in a rainbow. Computer screens cannot show them precisely but can make colors that look similar.

The Rainbow colors are: Red, Orange, Yellow, Green, Blue, Indigo, Violet.

Red Orange Yellow Green Blue Indigo Violet

Variant

​ ​ ​ ​ ​ ​ ​

Simplified

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​
COLOR SYNTAX IN CSS Exemples of half-transparent red:
Hexadecimal (RRGGBBAA): #ff000080
HSL: hsla(0, 100%, 50%, 50%) = hsl( 0 100 50 / .5)
RGB: rgba(255, 0, 0, 50%) = rgb( 255 0 0 / .5) = rgb( 100% 0% 0% / 50%)
% → HEX VALUE
%: 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 HEX: 00 0D 1A 26 33 40 4D 59 66 73 80 8C 99 A6 B3 BF CC D9 E6 F2 FF

FF is number written in hex mode. That number represent 255 in decimal. For example, if you want 42% to calculate you need to find 42% of numbeer 255 and convert that number to hex. 255 * 0.42 ~= 107 107 to hex is 6B.
-- maleta (2016-12-27 10:32:28Z, License: CC BY-SA 3.0), source
LINKS

Various links to useful resources.