Benannte Farbe · #A2CFFE
Baby Blue
Baby Blue ist #A2CFFE: rgb(162 207 254), hsl(211 98% 82%), oklch(0.839 0.081 249.9). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Baby Blue color name →
#A2CFFE
oklch(0.839 0.081 249.9)
Farbumrechnungen
- HEX
- #a2cffe
- RGB
- rgb(162 207 254)
- HSL
- hsl(211 98% 82%)
- HWB
- hwb(211 64% 0%)
- OKLCH
- oklch(0.839 0.081 249.9)
- OKLab
- oklab(0.839 -0.028 -0.077)
- CIE Lab
- lab(81.17 -6.79 -28.19)
- LCH
- lch(81.17 29 256.5)
- CMYK
- cmyk(36% 19% 0% 0%)
Tints · Shades · Tones
Tints
- ABD4FE
- B5D9FF
- BEDEFF
- C7E2FF
- D1E7FF
- DAECFF
- E3F1FF
- ECF6FF
- F6FAFF
Shades
- 8CB4DD
- 7799BD
- 637F9E
- 4F6780
- 3C4F63
- 2A3847
- 19232D
- 0A1016
- 010203
Tones
- 9FC7F1
- 9CBFE4
- 98B7D7
- 95AFCA
- 92A7BE
- 8E9FB1
- 8B97A5
- 878F98
- 84888C
Farbharmonien
Komplementär +180°
- A2CFFE
Baby Blue
- EDC190
≈ Harvester
Analog -30° +30°
- A2CFFE
Baby Blue
- 8CD7EF
≈ Blue Effervescence
- BFC5FF
≈ Light Periwinkle
Triadisch +120° +240°
- A2CFFE
Baby Blue
- FAB5BE
≈ Ballerina Pink
- B9D59D
≈ In Good Taste
Geteilt komplementär +150° +210°
- A2CFFE
Baby Blue
- F9B9A2
≈ Pallid Orange
- D6CC8E
≈ Royal Goblet
Tetradisch +90° +180° +270°
- A2CFFE
Baby Blue
- EFB6DB
≈ Soft Cashmere
- EDC190
≈ Harvester
- 9BDBB8
≈ Birthday King
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.62:1 · APCA Lc 28
Ag
AAAAuf Schwarz
WCAG 12.89:1 · APCA Lc 75
Beste Textfarbe: #000000
WCAG 12.89:1 (AAA) · APCA Lc 75
Contrast pairs
Code-Snippets
CSS
:root {
--baby-blue: #a2cffe;
--baby-blue-rgb: 162 207 254;
--baby-blue-oklch: oklch(0.839 0.081 249.9);
}
.element {
color: var(--baby-blue);
background-color: hsl(211 98% 82%);
border-color: oklch(0.839 0.081 249.9);
}Tailwind CSS v4
@theme {
--color-baby-blue: #a2cffe;
--color-baby-blue-50: #e5f7ff;
--color-baby-blue-100: #d5eaff;
--color-baby-blue-200: #bcd7f7;
--color-baby-blue-300: #9abbe1;
--color-baby-blue-400: #79a2cd;
--color-baby-blue-500: #5b8aba;
--color-baby-blue-600: #4d759d;
--color-baby-blue-700: #3e5e7e;
--color-baby-blue-800: #2b455d;
--color-baby-blue-900: #1d3041;
--color-baby-blue-950: #0d1c2a;
}SCSS
$baby-blue: #a2cffe;
$baby-blue-rgb: 162, 207, 254;
$baby-blue-light: mix(#fff, $baby-blue, 20%);
$baby-blue-dark: mix(#000, $baby-blue, 20%);
.element {
color: $baby-blue;
box-shadow: 0 0 0 2px rgba($baby-blue, 0.35);
}