Couleur nommée la plus proche · #DEF2E5
#DEF2E5
Couleur nommée la plus proche: Frozen Civilization
#DEF2E5 (rgb(222 242 229), hsl(141 43% 91%), oklch(0.943 0.027 157.4)) est la plus proche de la couleur nommée Frozen Civilization. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#DEF2E5
oklch(0.943 0.027 157.4)
Conversions de couleur
- HEX
- #def2e5
- RGB
- rgb(222 242 229)
- HSL
- hsl(141 43% 91%)
- HWB
- hwb(141 87% 5%)
- OKLCH
- oklch(0.943 0.027 157.4)
- OKLab
- oklab(0.943 -0.025 0.01)
- CIE Lab
- lab(93.73 -8.6 3.93)
- LCH
- lch(93.73 9.45 155.4)
- CMYK
- cmyk(8% 0% 5% 5%)
Teintes · Ombres · Tons
Teintes
- E1F3E8
- E5F5EA
- E8F6ED
- EBF7EF
- EFF9F2
- F2FAF5
- F5FBF7
- F8FCFA
- FCFEFC
Ombres
- C1D2C7
- A5B4AA
- 89968E
- 6F7972
- 555E58
- 3D433F
- 262B28
- 121412
- 020303
Tons
- D4E6DA
- CBDAD0
- C1CEC6
- B7C3BB
- AEB7B1
- A5ACA7
- 9BA19D
- 929693
- 898B8A
Harmonies de couleurs
Complémentaire +180°
- DEF2E5
Frozen Civilization
- F9E6F3
≈ Cherry Pearl
Analogue -30° +30°
- DEF2E5
Frozen Civilization
- E7F0DD
≈ Mayfair White
- D9F2EF
≈ Air of Mint
Triadique +120° +240°
- DEF2E5
Frozen Civilization
- E7EBFF
≈ Icy Lilac
- FEE6DF
≈ French Manicure
Complémentaire divisée +150° +210°
- DEF2E5
Frozen Civilization
- F1E8FB
≈ Bright Dusk
- FEE5E9
≈ Hepatica
Tétradique +90° +180° +270°
- DEF2E5
Frozen Civilization
- DEEEFE
≈ Calcareous Sinter
- F9E6F3
≈ Cherry Pearl
- F9E9D9
≈ Aria Ivory
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.17:1 · APCA Lc 8
Ag
AAASur noir
WCAG 17.93:1 · APCA Lc 96
Meilleure couleur de texte: #000000
WCAG 17.93:1 (AAA) · APCA Lc 96
Contrast pairs
Extraits de code
CSS
:root {
--frozen-civilization: #def2e5;
--frozen-civilization-rgb: 222 242 229;
--frozen-civilization-oklch: oklch(0.943 0.027 157.4);
}
.element {
color: var(--frozen-civilization);
background-color: hsl(141 43% 91%);
border-color: oklch(0.943 0.027 157.4);
}Tailwind CSS v4
@theme {
--color-frozen-civilization: #def2e5;
--color-frozen-civilization-50: #eff8f2;
--color-frozen-civilization-100: #e1ebe5;
--color-frozen-civilization-200: #cbd8d0;
--color-frozen-civilization-300: #acbcb2;
--color-frozen-civilization-400: #92a498;
--color-frozen-civilization-500: #788c7f;
--color-frozen-civilization-600: #66766c;
--color-frozen-civilization-700: #515f56;
--color-frozen-civilization-800: #3b453e;
--color-frozen-civilization-900: #29302b;
--color-frozen-civilization-950: #161c18;
}SCSS
$frozen-civilization: #def2e5;
$frozen-civilization-rgb: 222, 242, 229;
$frozen-civilization-light: mix(#fff, $frozen-civilization, 20%);
$frozen-civilization-dark: mix(#000, $frozen-civilization, 20%);
.element {
color: $frozen-civilization;
box-shadow: 0 0 0 2px rgba($frozen-civilization, 0.35);
}