Nazwany kolor · #A1B8D2
Elizabeth Blue
Elizabeth Blue to #A1B8D2: rgb(161 184 210), hsl(212 35% 73%), oklch(0.774 0.045 251.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Elizabeth Blue color name →
#A1B8D2
oklch(0.774 0.045 251.6)
Konwersje koloru
- HEX
- #a1b8d2
- RGB
- rgb(161 184 210)
- HSL
- hsl(212 35% 73%)
- HWB
- hwb(212 63% 18%)
- OKLCH
- oklch(0.774 0.045 251.6)
- OKLab
- oklab(0.774 -0.014 -0.043)
- CIE Lab
- lab(73.67 -3.87 -15.95)
- LCH
- lch(73.67 16.41 256.4)
- CMYK
- cmyk(23% 12% 0% 18%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- AABFD7
- B3C6DB
- BDCDE0
- C6D4E4
- CFDBE9
- D9E2ED
- E2E9F2
- ECF1F6
- F5F8FB
Odcienie ciemniejsze
- 8BA0B6
- 76889B
- 627181
- 4E5B68
- 3C4550
- 2A3139
- 191E24
- 090C10
- 010202
Tony
- 9EB2CA
- 9AADC1
- 97A7B9
- 94A1B1
- 919CA8
- 8D96A0
- 8A9198
- 878B90
- 838588
Harmonie kolorów
Komplementarna +180°
- A1B8D2
Elizabeth Blue
- C8B197
≈ Basswood
Analogowa -30° +30°
- A1B8D2
Elizabeth Blue
- 97BDCA
≈ Sydney Harbour
- B0B3D2
≈ Pixie Violet
Triada +120° +240°
- A1B8D2
Elizabeth Blue
- D0AAAE
≈ Pale Persimmon
- ABBC9E
≈ Pale Sage
Komplementarna rozszczepiona +150° +210°
- A1B8D2
Elizabeth Blue
- D0AD9F
≈ Art Deco Pink
- BBB796
≈ Bog
Tetrada +90° +180° +270°
- A1B8D2
Elizabeth Blue
- CBABBE
≈ Winsome Orchid
- C8B197
≈ Basswood
- 9DBFAC
≈ Spring Reflection
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.03:1 · APCA Lc 40
Ag
AAANa czerni
WCAG 10.30:1 · APCA Lc 63
Najlepszy kolor tekstu: #000000
WCAG 10.30:1 (AAA) · APCA Lc 63
Contrast pairs
Fragmenty kodu
CSS
:root {
--elizabeth-blue: #a1b8d2;
--elizabeth-blue-rgb: 161 184 210;
--elizabeth-blue-oklch: oklch(0.774 0.045 251.6);
}
.element {
color: var(--elizabeth-blue);
background-color: hsl(212 35% 73%);
border-color: oklch(0.774 0.045 251.6);
}Tailwind CSS v4
@theme {
--color-elizabeth-blue: #a1b8d2;
--color-elizabeth-blue-50: #ecf6ff;
--color-elizabeth-blue-100: #dee9f7;
--color-elizabeth-blue-200: #c7d6e8;
--color-elizabeth-blue-300: #a8b9cf;
--color-elizabeth-blue-400: #8ba1b9;
--color-elizabeth-blue-500: #7189a4;
--color-elizabeth-blue-600: #5f748a;
--color-elizabeth-blue-700: #4c5c6f;
--color-elizabeth-blue-800: #374452;
--color-elizabeth-blue-900: #252f39;
--color-elizabeth-blue-950: #141b23;
}SCSS
$elizabeth-blue: #a1b8d2;
$elizabeth-blue-rgb: 161, 184, 210;
$elizabeth-blue-light: mix(#fff, $elizabeth-blue, 20%);
$elizabeth-blue-dark: mix(#000, $elizabeth-blue, 20%);
.element {
color: $elizabeth-blue;
box-shadow: 0 0 0 2px rgba($elizabeth-blue, 0.35);
}