Named color · #22DDEE
Cold Heights
Cold Heights is #22DDEE: rgb(34 221 238), hsl(185 86% 53%), oklch(0.821 0.136 205). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Cold Heights color name →
#22DDEE
oklch(0.821 0.136 205)
Color conversions
- HEX
- #22ddee
- RGB
- rgb(34 221 238)
- HSL
- hsl(185 86% 53%)
- HWB
- hwb(185 13% 7%)
- OKLCH
- oklch(0.821 0.136 205)
- OKLab
- oklab(0.821 -0.123 -0.057)
- CIE Lab
- lab(80.39 -40.17 -21.41)
- LCH
- lch(80.39 45.52 208.1)
- CMYK
- cmyk(86% 7% 0% 7%)
Tints · Shades · Tones
Tints
- 50E1F0
- 6DE5F2
- 84E8F3
- 99ECF5
- ACEFF7
- BEF3F9
- CFF6FA
- DFF9FC
- EFFCFD
Shades
- 1CC0CF
- 16A4B1
- 118893
- 0B6E77
- 07555C
- 033D42
- 01262A
- 001114
- 000203
Tones
- 3FD4E3
- 50CAD7
- 5CC1CC
- 65B8C1
- 6CAEB6
- 72A5AB
- 779CA0
- 7B9295
- 7E898B
Color harmonies
Complementary +180°
- 22DDEE
Cold Heights
- FFABA4
≈ Patient Pink
Analogous -30° +30°
- 22DDEE
Cold Heights
- 48E1BF
≈ Celestial Green
- 7CD0FF
≈ Drift on the Sea
Triadic +120° +240°
- 22DDEE
Cold Heights
- F1A5F5
≈ Rich Brilliant Lavender
- EDBD50
≈ Luminous Apricot
Split-complementary +150° +210°
- 22DDEE
Cold Heights
- FFA5C8
≈ Bazooka Pink
- FFB079
≈ Cantaloupe Slice
Tetradic +90° +180° +270°
- 22DDEE
Cold Heights
- C9B8FF
≈ Violet Heaven
- FFABA4
≈ Patient Pink
- C2CF60
≈ Sonic Lime
Contrast & accessibility
Ag
FailOn white
WCAG 1.66:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.64:1 · APCA Lc 74
Best text color: #000000
WCAG 12.64:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--cold-heights: #22ddee;
--cold-heights-rgb: 34 221 238;
--cold-heights-oklch: oklch(0.821 0.136 205);
}
.element {
color: var(--cold-heights);
background-color: hsl(185 86% 53%);
border-color: oklch(0.821 0.136 205);
}Tailwind CSS v4
@theme {
--color-cold-heights: #22ddee;
--color-cold-heights-50: #c8ffff;
--color-cold-heights-100: #b2f5ff;
--color-cold-heights-200: #8be5f2;
--color-cold-heights-300: #52cbda;
--color-cold-heights-400: #00b4c4;
--color-cold-heights-500: #009eb1;
--color-cold-heights-600: #008595;
--color-cold-heights-700: #006b78;
--color-cold-heights-800: #004f57;
--color-cold-heights-900: #00373d;
--color-cold-heights-950: #002226;
}SCSS
$cold-heights: #22ddee;
$cold-heights-rgb: 34, 221, 238;
$cold-heights-light: mix(#fff, $cold-heights, 20%);
$cold-heights-dark: mix(#000, $cold-heights, 20%);
.element {
color: $cold-heights;
box-shadow: 0 0 0 2px rgba($cold-heights, 0.35);
}