Couleur nommée · #D7FFFE
Refreshing Primer
Refreshing Primer correspond à #D7FFFE : rgb(215 255 254), hsl(179 100% 92%), oklch(0.972 0.041 194.6). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Teal mean? → · Refreshing Primer color name →
#D7FFFE
oklch(0.972 0.041 194.6)
Conversions de couleur
- HEX
- #d7fffe
- RGB
- rgb(215 255 254)
- HSL
- hsl(179 100% 92%)
- HWB
- hwb(179 84% 0%)
- OKLCH
- oklch(0.972 0.041 194.6)
- OKLab
- oklab(0.972 -0.04 -0.01)
- CIE Lab
- lab(97.15 -13.4 -4.03)
- LCH
- lch(97.15 13.99 196.7)
- CMYK
- cmyk(16% 0% 0% 0%)
Teintes · Ombres · Tons
Teintes
- DBFFFE
- DFFFFE
- E3FFFE
- E7FFFE
- EBFFFF
- EFFFFF
- F3FFFF
- F7FFFF
- FBFFFF
Ombres
- BBDEDD
- 9FBEBD
- 859E9E
- 6B8080
- 526363
- 3B4847
- 252E2D
- 111616
- 020303
Tons
- CEF2F1
- C5E4E4
- BCD7D7
- B4CACA
- ABBEBD
- A2B1B0
- 9AA4A4
- 919898
- 888C8C
Harmonies de couleurs
Complémentaire +180°
- D7FFFE
Refreshing Primer
- FFF2F3
≈ Glimpse of Pink
Analogue -30° +30°
- D7FFFE
Refreshing Primer
- DEFFEF
≈ Crystal Glass
- E9F9FF
≈ Clear Skies
Triadique +120° +240°
- D7FFFE
Refreshing Primer
- FBF2FF
≈ Sugar Crystal
- FFF4E5
≈ Soft Pillow
Complémentaire divisée +150° +210°
- D7FFFE
Refreshing Primer
- FFF1F8
≈ Pinkish White
- FFF3EE
≈ Soft Peach Mist
Tétradique +90° +180° +270°
- D7FFFE
Refreshing Primer
- F4F5FF
≈ Sugar Crystal
- FFF2F3
≈ Glimpse of Pink
- F9F8D8
≈ Citrine White
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.07:1 · APCA Lc 0
Ag
AAASur noir
WCAG 19.62:1 · APCA Lc 103
Meilleure couleur de texte: #000000
WCAG 19.62:1 (AAA) · APCA Lc 103
Contrast pairs
Extraits de code
CSS
:root {
--refreshing-primer: #d7fffe;
--refreshing-primer-rgb: 215 255 254;
--refreshing-primer-oklch: oklch(0.972 0.041 194.6);
}
.element {
color: var(--refreshing-primer);
background-color: hsl(179 100% 92%);
border-color: oklch(0.972 0.041 194.6);
}Tailwind CSS v4
@theme {
--color-refreshing-primer: #d7fffe;
--color-refreshing-primer-50: #e8f9f9;
--color-refreshing-primer-100: #d9ecec;
--color-refreshing-primer-200: #c1dada;
--color-refreshing-primer-300: #a0bebe;
--color-refreshing-primer-400: #83a6a6;
--color-refreshing-primer-500: #668f8e;
--color-refreshing-primer-600: #577978;
--color-refreshing-primer-700: #456160;
--color-refreshing-primer-800: #324746;
--color-refreshing-primer-900: #223131;
--color-refreshing-primer-950: #111d1d;
}SCSS
$refreshing-primer: #d7fffe;
$refreshing-primer-rgb: 215, 255, 254;
$refreshing-primer-light: mix(#fff, $refreshing-primer, 20%);
$refreshing-primer-dark: mix(#000, $refreshing-primer, 20%);
.element {
color: $refreshing-primer;
box-shadow: 0 0 0 2px rgba($refreshing-primer, 0.35);
}