Named color · #85B3B2
Cold Front Green
Cold Front Green is #85B3B2: rgb(133 179 178), hsl(179 23% 61%), oklch(0.734 0.049 194.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Cold Front Green color name →
#85B3B2
oklch(0.734 0.049 194.5)
Color conversions
- HEX
- #85b3b2
- RGB
- rgb(133 179 178)
- HSL
- hsl(179 23% 61%)
- HWB
- hwb(179 52% 30%)
- OKLCH
- oklch(0.734 0.049 194.5)
- OKLab
- oklab(0.734 -0.047 -0.012)
- CIE Lab
- lab(69.64 -16.03 -4.74)
- LCH
- lch(69.64 16.71 196.5)
- CMYK
- cmyk(26% 0% 1% 30%)
Tints · Shades · Tones
Tints
- 91BAB9
- 9DC2C1
- A9C9C9
- B6D1D0
- C2D9D8
- CEE0E0
- DAE8E7
- E6F0EF
- F3F7F7
Shades
- 739B9A
- 618483
- 506E6D
- 405857
- 304343
- 212F2F
- 131D1D
- 060C0C
- 010101
Tones
- 85AEAD
- 85A9A8
- 84A4A3
- 849E9E
- 849999
- 839494
- 828F8F
- 828A8A
- 818585
Color harmonies
Complementary +180°
- 85B3B2
Cold Front Green
- C69D9F
≈ Rose Embroidery
Analogous -30° +30°
- 85B3B2
Cold Front Green
- 8DB3A1
≈ Chrysopal Light Green
- 88B0C0
≈ Bermuda Blue
Triadic +120° +240°
- 85B3B2
Cold Front Green
- B4A0BF
≈ Calming Silver Lavender
- BCA587
≈ Gobi Tan
Split-complementary +150° +210°
- 85B3B2
Cold Front Green
- C09DB0
≈ Lily
- C4A090
≈ Cabbage Rose
Tetradic +90° +180° +270°
- 85B3B2
Cold Front Green
- A5A5C7
≈ Blossom Mauve
- C69D9F
≈ Rose Embroidery
- ADAB88
≈ Green Grey Mist
Contrast & accessibility
Ag
FailOn white
WCAG 2.31:1 · APCA Lc 46
Ag
AAAOn black
WCAG 9.08:1 · APCA Lc 57
Best text color: #000000
WCAG 9.08:1 (AAA) · APCA Lc 57
Contrast pairs
Code snippets
CSS
:root {
--cold-front-green: #85b3b2;
--cold-front-green-rgb: 133 179 178;
--cold-front-green-oklch: oklch(0.734 0.049 194.5);
}
.element {
color: var(--cold-front-green);
background-color: hsl(179 23% 61%);
border-color: oklch(0.734 0.049 194.5);
}Tailwind CSS v4
@theme {
--color-cold-front-green: #85b3b2;
--color-cold-front-green-50: #e6fafa;
--color-cold-front-green-100: #d6eded;
--color-cold-front-green-200: #bddbdb;
--color-cold-front-green-300: #9bc0c0;
--color-cold-front-green-400: #7da8a7;
--color-cold-front-green-500: #5f9190;
--color-cold-front-green-600: #517a7a;
--color-cold-front-green-700: #406261;
--color-cold-front-green-800: #2e4847;
--color-cold-front-green-900: #1f3231;
--color-cold-front-green-950: #0f1e1d;
}SCSS
$cold-front-green: #85b3b2;
$cold-front-green-rgb: 133, 179, 178;
$cold-front-green-light: mix(#fff, $cold-front-green, 20%);
$cold-front-green-dark: mix(#000, $cold-front-green, 20%);
.element {
color: $cold-front-green;
box-shadow: 0 0 0 2px rgba($cold-front-green, 0.35);
}