Cor nomeada · #A1CAF1
Baby Blue Eyes
Baby Blue Eyes é #A1CAF1: rgb(161 202 241), hsl(209 74% 79%), oklch(0.823 0.07 247.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Baby Blue Eyes color name →
#A1CAF1
oklch(0.823 0.07 247.4)
Conversões de cor
- HEX
- #a1caf1
- RGB
- rgb(161 202 241)
- HSL
- hsl(209 74% 79%)
- HWB
- hwb(209 63% 5%)
- OKLCH
- oklch(0.823 0.07 247.4)
- OKLab
- oklab(0.823 -0.027 -0.065)
- CIE Lab
- lab(79.39 -7.13 -24.01)
- LCH
- lch(79.39 25.04 253.5)
- CMYK
- cmyk(33% 16% 0% 5%)
Tons claros · Sombras · Tons
Tons claros
- AACFF3
- B4D5F4
- BDDAF6
- C7DFF7
- D0E5F9
- D9EAFA
- E3EFFB
- ECF4FD
- F6FAFE
Sombras
- 8BAFD2
- 7695B3
- 627C95
- 4E6479
- 3C4D5D
- 2A3743
- 19222B
- 090F14
- 010203
Tons
- 9EC2E5
- 9BBBDA
- 98B3CE
- 94ACC3
- 91A5B7
- 8E9DAC
- 8A96A1
- 878E96
- 84878B
Harmonias de cor
Complementar +180°
- A1CAF1
Baby Blue Eyes
- E4BD94
≈ Laksa
Análoga -30° +30°
- A1CAF1
Baby Blue Eyes
- 90D1E3
≈ July
- B9C2F3
≈ Vodka
Tríade +120° +240°
- A1CAF1
Baby Blue Eyes
- EEB3BD
≈ Frozen Veins
- B8CE9D
≈ Fava Bean
Complementar dividida +150° +210°
- A1CAF1
Baby Blue Eyes
- EEB6A5
≈ Plushy Pink
- D1C691
≈ Vast Escape
Tétrade +90° +180° +270°
- A1CAF1
Baby Blue Eyes
- E4B4D6
≈ Pink Gems
- E4BD94
≈ Laksa
- 9FD3B3
≈ Menthol Green
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.71:1 · APCA Lc 31
Ag
AAASobre preto
WCAG 12.23:1 · APCA Lc 72
Melhor cor de texto: #000000
WCAG 12.23:1 (AAA) · APCA Lc 72
Contrast pairs
Trechos de código
CSS
:root {
--baby-blue-eyes: #a1caf1;
--baby-blue-eyes-rgb: 161 202 241;
--baby-blue-eyes-oklch: oklch(0.823 0.07 247.4);
}
.element {
color: var(--baby-blue-eyes);
background-color: hsl(209 74% 79%);
border-color: oklch(0.823 0.07 247.4);
}Tailwind CSS v4
@theme {
--color-baby-blue-eyes: #a1caf1;
--color-baby-blue-eyes-50: #e6f7ff;
--color-baby-blue-eyes-100: #d7eaff;
--color-baby-blue-eyes-200: #bed7f2;
--color-baby-blue-eyes-300: #9cbbdb;
--color-baby-blue-eyes-400: #7da3c6;
--color-baby-blue-eyes-500: #5f8bb3;
--color-baby-blue-eyes-600: #517597;
--color-baby-blue-eyes-700: #415e79;
--color-baby-blue-eyes-800: #2d4559;
--color-baby-blue-eyes-900: #1f303e;
--color-baby-blue-eyes-950: #0e1c28;
}SCSS
$baby-blue-eyes: #a1caf1;
$baby-blue-eyes-rgb: 161, 202, 241;
$baby-blue-eyes-light: mix(#fff, $baby-blue-eyes, 20%);
$baby-blue-eyes-dark: mix(#000, $baby-blue-eyes, 20%);
.element {
color: $baby-blue-eyes;
box-shadow: 0 0 0 2px rgba($baby-blue-eyes, 0.35);
}