#335F6F#335F6F
#335F6F is a mid, muted cyan. Relative luminance 0.100; OKLCH L 46.1% C 0.055 H 223.8°. Best body text is #FFFFFF at 6.98:1 contrast (WCAG AA passes).
Color values
| HEX | #335F6F |
|---|---|
| RGB | rgb(51, 95, 111) |
| HSL | hsl(196, 37%, 32%) |
| HSV | hsv(196, 54%, 44%) |
| CMYK | cmyk(54.1%, 14.4%, 0%, 56.5%) |
| CIE-LAB | lab(37.91, -10.30, -13.76) |
| CIE-LCH | lch(37.91, 17.19, 233.20°) |
| OKLab | oklab(46.06% -0.0398 -0.0381) |
| OKLCH | oklch(46.06% 0.055 223.8) |
| XYZ | xyz(8.3256, 10.0352, 16.5341) |
| Luminance | 0.1004 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Slate
#516572
ΔE00 6.77
Petrol
#005F6A
ΔE00 6.82
Gunmetal (survey)
#536267
ΔE00 7.89
Ugly Blue
#31668A
ΔE00 7.95
Sea Blue
#047495
ΔE00 9.03
Slate Grey
#59656D
ΔE00 9.21
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#335F6F #6F4333
analogous
#336F61 #335F6F #33416F
triadic
#335F6F #6F335F #5F6F33
tetradic
#335F6F #61336F #6F4333 #416F33
square
#335F6F #61336F #6F4333 #416F33
split-complementary
#335F6F #6F3341 #6F6133
monochromatic
#0C171B #203B45 #335F6F #468399 #64A2B8
Accessibility & contrast
On white
6.98
#335F6F on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.01
#335F6F on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #335F6F
6.98:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##335F6F | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##335F6F | 1.00 | 6.98 | 3.01 | 6.98 |
| #FFFFFF | 6.98 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.01 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.98 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#565D70
Deuteranopia (green-blind)
#4D566F
Tritanopia (blue-blind)
#0E6464
Achromatopsia (no color)
#595959
Design tokens & code
CSS
--color: #335f6f; /* rgb */ color: rgb(51, 95, 111); /* oklch */ color: oklch(46.1% 0.055 223.8);
Tailwind
colors: {
custom: {
50: '#708c98',
500: '#335f6f',
950: '#000000',
},
}SCSS
$custom: #335f6f; $custom-light: #708c98; $custom-dark: #000000;
JSON
{
"hex": "#335f6f",
"rgb": {
"r": 51,
"g": 95,
"b": 111
},
"hsl": {
"h": 196,
"s": 37.037,
"l": 31.765
},
"oklch": {
"l": 0.46057,
"c": 0.05513,
"h": 223.8
},
"luminance": 0.10036
}Semantic roles & 50–950 ramp
primary
#335F6F
secondary
#A0705E
accent
#795BCD
background
#F6F8F9
surface
#ECF0F2
border
#C7CBCC
text
#080C0D
muted
#7B7D7E