Named color · #DAEFCE
Seafoam Spray
Seafoam Spray is #DAEFCE: rgb(218 239 206), hsl(98 51% 87%), oklch(0.928 0.049 134.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Seafoam Spray color name →
#DAEFCE
oklch(0.928 0.049 134.1)
Color conversions
- HEX
- #daefce
- RGB
- rgb(218 239 206)
- HSL
- hsl(98 51% 87%)
- HWB
- hwb(98 81% 6%)
- OKLCH
- oklch(0.928 0.049 134.1)
- OKLab
- oklab(0.928 -0.034 0.035)
- CIE Lab
- lab(92.23 -11.54 13.57)
- LCH
- lch(92.23 17.82 130.4)
- CMYK
- cmyk(9% 0% 14% 6%)
Tints · Shades · Tones
Tints
- DEF1D3
- E1F2D8
- E5F4DD
- E9F5E2
- ECF7E7
- F0F9EB
- F4FAF0
- F8FCF5
- FBFDFA
Shades
- BDD0B3
- A2B198
- 87947F
- 6C7866
- 545C4E
- 3C4238
- 252A23
- 11140F
- 020302
Tones
- D1E3C6
- C7D8BE
- BECCB6
- B5C1AE
- ACB6A6
- A3AB9F
- 9AA097
- 91958F
- 898B88
Color harmonies
Complementary +180°
- DAEFCE
Seafoam Spray
- F3DEFF
≈ Lavender Savour
Analogous -30° +30°
- DAEFCE
Seafoam Spray
- ECE9C4
≈ Pale Celery
- CAF2DE
≈ Greenish White
Triadic +120° +240°
- DAEFCE
Seafoam Spray
- D8E9FF
≈ Veiling Waterfalls
- FFDEE0
≈ Sweet Mallow
Split-complementary +150° +210°
- DAEFCE
Seafoam Spray
- E4E5FF
≈ Lavender Mist
- FFDBEF
≈ Rose Glow
Tetradic +90° +180° +270°
- DAEFCE
Seafoam Spray
- C6EFFF
≈ Heaven’s Gate
- F3DEFF
≈ Lavender Savour
- FFE0D2
≈ Light Quilt
Contrast & accessibility
Ag
FailOn white
WCAG 1.21:1 · APCA Lc 11
Ag
AAAOn black
WCAG 17.21:1 · APCA Lc 93
Best text color: #000000
WCAG 17.21:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--seafoam-spray: #daefce;
--seafoam-spray-rgb: 218 239 206;
--seafoam-spray-oklch: oklch(0.928 0.049 134.1);
}
.element {
color: var(--seafoam-spray);
background-color: hsl(98 51% 87%);
border-color: oklch(0.928 0.049 134.1);
}Tailwind CSS v4
@theme {
--color-seafoam-spray: #daefce;
--color-seafoam-spray-50: #eff9eb;
--color-seafoam-spray-100: #e1ecdc;
--color-seafoam-spray-200: #cbd9c5;
--color-seafoam-spray-300: #acbea5;
--color-seafoam-spray-400: #93a588;
--color-seafoam-spray-500: #798e6d;
--color-seafoam-spray-600: #66785c;
--color-seafoam-spray-700: #526049;
--color-seafoam-spray-800: #3c4634;
--color-seafoam-spray-900: #293124;
--color-seafoam-spray-950: #171d13;
}SCSS
$seafoam-spray: #daefce;
$seafoam-spray-rgb: 218, 239, 206;
$seafoam-spray-light: mix(#fff, $seafoam-spray, 20%);
$seafoam-spray-dark: mix(#000, $seafoam-spray, 20%);
.element {
color: $seafoam-spray;
box-shadow: 0 0 0 2px rgba($seafoam-spray, 0.35);
}