Nearest named color · #DDEFF1
#DDEFF1
Nearest named color: Free Spirit
#DDEFF1 (rgb(221 239 241), hsl(186 42% 91%), oklch(0.939 0.019 204.8)) is closest to the named color Free Spirit. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#DDEFF1
oklch(0.939 0.019 204.8)
Color conversions
- HEX
- #ddeff1
- RGB
- rgb(221 239 241)
- HSL
- hsl(186 42% 91%)
- HWB
- hwb(186 87% 5%)
- OKLCH
- oklch(0.939 0.019 204.8)
- OKLab
- oklab(0.939 -0.017 -0.008)
- CIE Lab
- lab(93.14 -5.86 -3.12)
- LCH
- lch(93.14 6.64 208)
- CMYK
- cmyk(8% 1% 0% 5%)
Tints · Shades · Tones
Tints
- E0F1F2
- E4F2F4
- E7F4F5
- EBF5F7
- EEF7F8
- F1F9F9
- F5FAFB
- F8FCFC
- FCFDFE
Shades
- C0D0D2
- A4B1B3
- 889495
- 6E7879
- 555C5D
- 3D4243
- 262A2B
- 111414
- 020303
Tones
- D3E3E5
- CAD8D9
- C0CCCE
- B7C1C2
- ADB6B7
- A4ABAC
- 9BA0A0
- 929596
- 898B8B
Color harmonies
Complementary +180°
- DDEFF1
Free Spirit
- F8E6E5
≈ Girly Nursery
Analogous -30° +30°
- DDEFF1
Free Spirit
- DFEFEA
≈ Clear Day
- DFEDF6
≈ Ice Fishing
Triadic +120° +240°
- DDEFF1
Free Spirit
- F2E7F2
≈ Perfume Haze
- F1EADD
≈ Classic Light Buff
Split-complementary +150° +210°
- DDEFF1
Free Spirit
- F6E6EC
≈ Amour Frais
- F6E8DF
≈ White Pudding
Tetradic +90° +180° +270°
- DDEFF1
Free Spirit
- EBE9F7
≈ Bright Dusk
- F8E6E5
≈ Girly Nursery
- EAEDDE
≈ Mental Note
Contrast & accessibility
Ag
FailOn white
WCAG 1.18:1 · APCA Lc 9
Ag
AAAOn black
WCAG 17.69:1 · APCA Lc 95
Best text color: #000000
WCAG 17.69:1 (AAA) · APCA Lc 95
Contrast pairs
Code snippets
CSS
:root {
--free-spirit: #ddeff1;
--free-spirit-rgb: 221 239 241;
--free-spirit-oklch: oklch(0.939 0.019 204.8);
}
.element {
color: var(--free-spirit);
background-color: hsl(186 42% 91%);
border-color: oklch(0.939 0.019 204.8);
}Tailwind CSS v4
@theme {
--color-free-spirit: #ddeff1;
--color-free-spirit-50: #eff7f8;
--color-free-spirit-100: #e1eaeb;
--color-free-spirit-200: #cbd7d8;
--color-free-spirit-300: #adbabc;
--color-free-spirit-400: #92a2a4;
--color-free-spirit-500: #788a8c;
--color-free-spirit-600: #667577;
--color-free-spirit-700: #515d5f;
--color-free-spirit-800: #3b4445;
--color-free-spirit-900: #282f30;
--color-free-spirit-950: #161c1c;
}SCSS
$free-spirit: #ddeff1;
$free-spirit-rgb: 221, 239, 241;
$free-spirit-light: mix(#fff, $free-spirit, 20%);
$free-spirit-dark: mix(#000, $free-spirit, 20%);
.element {
color: $free-spirit;
box-shadow: 0 0 0 2px rgba($free-spirit, 0.35);
}