Nazwany kolor · #2A8FBD
Christmas Blue
Christmas Blue to #2A8FBD: rgb(42 143 189), hsl(199 64% 45%), oklch(0.614 0.113 233.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Christmas Blue color name →
#2A8FBD
oklch(0.614 0.113 233.1)
Konwersje koloru
- HEX
- #2a8fbd
- RGB
- rgb(42 143 189)
- HSL
- hsl(199 64% 45%)
- HWB
- hwb(199 16% 26%)
- OKLCH
- oklch(0.614 0.113 233.1)
- OKLab
- oklab(0.614 -0.068 -0.09)
- CIE Lab
- lab(55.37 -17.35 -32.79)
- LCH
- lch(55.37 37.1 242.1)
- CMYK
- cmyk(78% 24% 0% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 479AC4
- 5EA5CB
- 74B1D2
- 88BCD8
- 9CC7DF
- B0D2E6
- C4DDEC
- D8E9F2
- EBF4F9
Odcienie ciemniejsze
- 237CA4
- 1C698C
- 165774
- 10455D
- 0A3447
- 052433
- 02151F
- 01070D
- 000102
Tony
- 398EB7
- 458DB1
- 4F8BAB
- 588AA5
- 60889F
- 678799
- 6E8593
- 74848D
- 7A8286
Harmonie kolorów
Komplementarna +180°
- 2A8FBD
Christmas Blue
- B9703E
≈ Spice Cake
Analogowa -30° +30°
- 2A8FBD
Christmas Blue
- 0096A0
≈ Peacock Feather
- 6083C8
≈ Bodega Bay
Triada +120° +240°
- 2A8FBD
Christmas Blue
- B8668A
≈ Malevolent Mauve
- 858B31
≈ Buffy Citrine
Komplementarna rozszczepiona +150° +210°
- 2A8FBD
Christmas Blue
- BF6764
≈ Faded Rose
- A57D24
≈ Burnt Honey
Tetrada +90° +180° +270°
- 2A8FBD
Christmas Blue
- A56CAB
≈ Soft Purple
- B9703E
≈ Spice Cake
- 599656
≈ Wicked Witch
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.64:1 · APCA Lc 64
Ag
AANa czerni
WCAG 5.76:1 · APCA Lc 38
Najlepszy kolor tekstu: #000000
WCAG 5.76:1 (AA) · APCA Lc 38
Contrast pairs
Fragmenty kodu
CSS
:root {
--christmas-blue: #2a8fbd;
--christmas-blue-rgb: 42 143 189;
--christmas-blue-oklch: oklch(0.614 0.113 233.1);
}
.element {
color: var(--christmas-blue);
background-color: hsl(199 64% 45%);
border-color: oklch(0.614 0.113 233.1);
}Tailwind CSS v4
@theme {
--color-christmas-blue: #2a8fbd;
--color-christmas-blue-50: #d7fbff;
--color-christmas-blue-100: #c4efff;
--color-christmas-blue-200: #a5ddfe;
--color-christmas-blue-300: #7cc1e9;
--color-christmas-blue-400: #51a9d6;
--color-christmas-blue-500: #1491c4;
--color-christmas-blue-600: #177ba6;
--color-christmas-blue-700: #136385;
--color-christmas-blue-800: #074962;
--color-christmas-blue-900: #053245;
--color-christmas-blue-950: #001e2d;
}SCSS
$christmas-blue: #2a8fbd;
$christmas-blue-rgb: 42, 143, 189;
$christmas-blue-light: mix(#fff, $christmas-blue, 20%);
$christmas-blue-dark: mix(#000, $christmas-blue, 20%);
.element {
color: $christmas-blue;
box-shadow: 0 0 0 2px rgba($christmas-blue, 0.35);
}