Cor nomeada · #CDE0E1
Beach Foam
Beach Foam é #CDE0E1: rgb(205 224 225), hsl(183 25% 84%), oklch(0.893 0.02 200.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Beach Foam color name →
#CDE0E1
oklch(0.893 0.02 200.6)
Conversões de cor
- HEX
- #cde0e1
- RGB
- rgb(205 224 225)
- HSL
- hsl(183 25% 84%)
- HWB
- hwb(183 80% 12%)
- OKLCH
- oklch(0.893 0.02 200.6)
- OKLab
- oklab(0.893 -0.019 -0.007)
- CIE Lab
- lab(87.77 -6.41 -2.77)
- LCH
- lch(87.77 6.98 203.4)
- CMYK
- cmyk(9% 0% 0% 12%)
Tons claros · Sombras · Tons
Tons claros
- D2E3E4
- D7E6E7
- DCE9EA
- E1ECED
- E6EFF0
- EBF3F3
- F0F6F6
- F5F9F9
- FAFCFC
Sombras
- B2C3C4
- 98A6A7
- 7E8A8B
- 667070
- 4E5656
- 383E3E
- 232727
- 0F1212
- 020202
Tons
- C5D6D7
- BDCCCD
- B5C2C3
- AEB8B9
- A6AFAF
- 9EA5A6
- 969C9C
- 8F9293
- 878989
Harmonias de cor
Complementar +180°
- CDE0E1
Beach Foam
- E9D7D6
≈ Light Youth
Análoga -30° +30°
- CDE0E1
Beach Foam
- CFE0DA
≈ Snow Leopard
- CFDEE7
≈ Fenrisian Grey
Tríade +120° +240°
- CDE0E1
Beach Foam
- E2D8E4
≈ Flowers of May
- E3DBCD
≈ Last Straw
Complementar dividida +150° +210°
- CDE0E1
Beach Foam
- E7D6DD
≈ Swiss Rose
- E7D8D0
≈ Sentimental
Tétrade +90° +180° +270°
- CDE0E1
Beach Foam
- DBDAE9
≈ Eyeshadow
- E9D7D6
≈ Light Youth
- DCDDCE
≈ Light Soft Kind
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.36:1 · APCA Lc 18
Ag
AAASobre preto
WCAG 15.34:1 · APCA Lc 86
Melhor cor de texto: #000000
WCAG 15.34:1 (AAA) · APCA Lc 86
Contrast pairs
Trechos de código
CSS
:root {
--beach-foam: #cde0e1;
--beach-foam-rgb: 205 224 225;
--beach-foam-oklch: oklch(0.893 0.02 200.6);
}
.element {
color: var(--beach-foam);
background-color: hsl(183 25% 84%);
border-color: oklch(0.893 0.02 200.6);
}Tailwind CSS v4
@theme {
--color-beach-foam: #cde0e1;
--color-beach-foam-50: #eff7f8;
--color-beach-foam-100: #e1eaeb;
--color-beach-foam-200: #cbd7d8;
--color-beach-foam-300: #acbbbc;
--color-beach-foam-400: #91a2a3;
--color-beach-foam-500: #778a8c;
--color-beach-foam-600: #657576;
--color-beach-foam-700: #515e5e;
--color-beach-foam-800: #3b4545;
--color-beach-foam-900: #282f30;
--color-beach-foam-950: #161c1c;
}SCSS
$beach-foam: #cde0e1;
$beach-foam-rgb: 205, 224, 225;
$beach-foam-light: mix(#fff, $beach-foam, 20%);
$beach-foam-dark: mix(#000, $beach-foam, 20%);
.element {
color: $beach-foam;
box-shadow: 0 0 0 2px rgba($beach-foam, 0.35);
}