Couleur nommée la plus proche · #AFD1DC
#AFD1DC
Couleur nommée la plus proche: Pale Whale
#AFD1DC (rgb(175 209 220), hsl(195 39% 77%), oklch(0.839 0.039 219.4)) est la plus proche de la couleur nommée Pale Whale. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#AFD1DC
oklch(0.839 0.039 219.4)
Conversions de couleur
- HEX
- #afd1dc
- RGB
- rgb(175 209 220)
- HSL
- hsl(195 39% 77%)
- HWB
- hwb(195 69% 14%)
- OKLCH
- oklch(0.839 0.039 219.4)
- OKLab
- oklab(0.839 -0.03 -0.025)
- CIE Lab
- lab(81.61 -9.91 -9.42)
- LCH
- lch(81.61 13.68 223.5)
- CMYK
- cmyk(20% 5% 0% 14%)
Teintes · Ombres · Tons
Teintes
- B7D6DF
- BFDAE3
- C7DFE6
- CFE3EA
- D7E8ED
- DFEDF1
- E7F1F4
- EFF6F8
- F7FAFB
Ombres
- 98B5BF
- 819BA3
- 6B8188
- 56686E
- 415054
- 2E393C
- 1C2326
- 0B1011
- 010202
Tons
- AAC9D2
- A6C0C9
- A1B8C0
- 9CB0B6
- 98A8AD
- 93A0A4
- 8E989B
- 899092
- 858889
Harmonies de couleurs
Complémentaire +180°
- AFD1DC
Pale Whale
- E2C2B8
≈ Silver Peony
Analogue -30° +30°
- AFD1DC
Pale Whale
- AED3D0
≈ Icy Morn
- B7CDE4
≈ Morality
Triadique +120° +240°
- AFD1DC
Pale Whale
- DDC1D3
≈ Lilac Snow
- D0CBAE
≈ Cilantro Cream
Complémentaire divisée +150° +210°
- AFD1DC
Pale Whale
- E2C0C5
≈ Odyssey Plum
- DCC6AF
≈ Arabian Sands
Tétradique +90° +180° +270°
- AFD1DC
Pale Whale
- D2C4DE
≈ Tender Violet
- E2C2B8
≈ Silver Peony
- C2D0B5
≈ Stability
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.61:1 · APCA Lc 28
Ag
AAASur noir
WCAG 12.97:1 · APCA Lc 75
Meilleure couleur de texte: #000000
WCAG 12.97:1 (AAA) · APCA Lc 75
Contrast pairs
Extraits de code
CSS
:root {
--pale-whale: #afd1dc;
--pale-whale-rgb: 175 209 220;
--pale-whale-oklch: oklch(0.839 0.039 219.4);
}
.element {
color: var(--pale-whale);
background-color: hsl(195 39% 77%);
border-color: oklch(0.839 0.039 219.4);
}Tailwind CSS v4
@theme {
--color-pale-whale: #afd1dc;
--color-pale-whale-50: #eaf8fd;
--color-pale-whale-100: #daebf1;
--color-pale-whale-200: #c3d8e0;
--color-pale-whale-300: #a2bcc6;
--color-pale-whale-400: #85a4ae;
--color-pale-whale-500: #698d98;
--color-pale-whale-600: #597781;
--color-pale-whale-700: #475f67;
--color-pale-whale-800: #33464b;
--color-pale-whale-900: #233034;
--color-pale-whale-950: #121d20;
}SCSS
$pale-whale: #afd1dc;
$pale-whale-rgb: 175, 209, 220;
$pale-whale-light: mix(#fff, $pale-whale, 20%);
$pale-whale-dark: mix(#000, $pale-whale, 20%);
.element {
color: $pale-whale;
box-shadow: 0 0 0 2px rgba($pale-whale, 0.35);
}