Color con nombre más cercano · #AFD4DC
#AFD4DC
Color con nombre más cercano: Clear Water
#AFD4DC (rgb(175 212 220), hsl(191 39% 77%), oklch(0.846 0.041 212.3)) se parece más al color con nombre Clear Water. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#AFD4DC
oklch(0.846 0.041 212.3)
Conversiones de color
- HEX
- #afd4dc
- RGB
- rgb(175 212 220)
- HSL
- hsl(191 39% 77%)
- HWB
- hwb(191 69% 14%)
- OKLCH
- oklch(0.846 0.041 212.3)
- OKLab
- oklab(0.846 -0.034 -0.022)
- CIE Lab
- lab(82.42 -11.35 -8.24)
- LCH
- lch(82.42 14.03 216)
- CMYK
- cmyk(20% 4% 0% 14%)
Tintes · Sombras · Tonos
Tintes
- B7D8DF
- BFDDE3
- C7E1E6
- CFE5EA
- D7E9ED
- DFEEF1
- E7F2F4
- EFF6F8
- F7FBFB
Sombras
- 98B8BF
- 819DA3
- 6B8388
- 56696E
- 415154
- 2E3A3C
- 1C2426
- 0B1011
- 010202
Tonos
- AACBD2
- A6C3C9
- A1BAC0
- 9CB2B6
- 98A9AD
- 93A1A4
- 8E989B
- 8A9092
- 858889
Armonías de color
Complementario +180°
- AFD4DC
Clear Water
- E6C3BC
≈ Congo
Análogo -30° +30°
- AFD4DC
Clear Water
- B0D6CE
≈ Gemini
- B6D0E5
≈ Tender Twilight
Triádico +120° +240°
- AFD4DC
Clear Water
- DDC3D8
≈ Plum Taffy
- D6CCAF
≈ Soft Suede
Complementario dividido +150° +210°
- AFD4DC
Clear Water
- E5C2CA
≈ Primrose Pink
- E0C7B2
≈ Novelle Peach
Tetrádico +90° +180° +270°
- AFD4DC
Clear Water
- D1C7E3
≈ Italian Fitch
- E6C3BC
≈ Congo
- C7D1B4
≈ Bonsai Tint
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.58:1 · APCA Lc 26
Ag
AAASobre negro
WCAG 13.27:1 · APCA Lc 77
Mejor color de texto: #000000
WCAG 13.27:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmentos de código
CSS
:root {
--clear-water: #afd4dc;
--clear-water-rgb: 175 212 220;
--clear-water-oklch: oklch(0.846 0.041 212.3);
}
.element {
color: var(--clear-water);
background-color: hsl(191 39% 77%);
border-color: oklch(0.846 0.041 212.3);
}Tailwind CSS v4
@theme {
--color-clear-water: #afd4dc;
--color-clear-water-50: #e9f8fc;
--color-clear-water-100: #d9ecf0;
--color-clear-water-200: #c2d9df;
--color-clear-water-300: #a1bdc4;
--color-clear-water-400: #83a5ad;
--color-clear-water-500: #678e96;
--color-clear-water-600: #57787f;
--color-clear-water-700: #466066;
--color-clear-water-800: #32464a;
--color-clear-water-900: #223133;
--color-clear-water-950: #111d1f;
}SCSS
$clear-water: #afd4dc;
$clear-water-rgb: 175, 212, 220;
$clear-water-light: mix(#fff, $clear-water, 20%);
$clear-water-dark: mix(#000, $clear-water, 20%);
.element {
color: $clear-water;
box-shadow: 0 0 0 2px rgba($clear-water, 0.35);
}