Nazwany kolor · #4E78A9
Sage Blossom Blue
Sage Blossom Blue to #4E78A9: rgb(78 120 169), hsl(212 37% 48%), oklch(0.563 0.09 253.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Sage Blossom Blue color name →
#4E78A9
oklch(0.563 0.09 253.1)
Konwersje koloru
- HEX
- #4e78a9
- RGB
- rgb(78 120 169)
- HSL
- hsl(212 37% 48%)
- HWB
- hwb(212 31% 34%)
- OKLCH
- oklch(0.563 0.09 253.1)
- OKLab
- oklab(0.563 -0.026 -0.086)
- CIE Lab
- lab(48.96 -3.94 -31.15)
- LCH
- lch(48.96 31.4 262.8)
- CMYK
- cmyk(54% 29% 0% 34%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 5F85B2
- 7092BB
- 819FC3
- 93ADCC
- A4BAD5
- B6C8DD
- C8D5E6
- DAE3EE
- ECF1F7
Odcienie ciemniejsze
- 436792
- 38577C
- 2D4867
- 233953
- 192A3F
- 0F1D2C
- 07101B
- 02050A
- 000101
Tony
- 5479A5
- 597AA1
- 5E7B9D
- 637C99
- 687D95
- 6D7E91
- 727E8D
- 777F89
- 7B7F84
Harmonie kolorów
Komplementarna +180°
- 4E78A9
Sage Blossom Blue
- 956D34
≈ Vintage Caramel
Analogowa -30° +30°
- 4E78A9
Sage Blossom Blue
- 2B819C
≈ Greenland Blue
- 6E6EA9
≈ Jacaranda Jazz
Triada +120° +240°
- 4E78A9
Sage Blossom Blue
- A35E66
≈ Pizza Pie
- 608149
≈ Talipot Palm
Komplementarna rozszczepiona +150° +210°
- 4E78A9
Sage Blossom Blue
- A26349
≈ Spiced Carrot
- 7F7833
≈ Faience Green
Tetrada +90° +180° +270°
- 4E78A9
Sage Blossom Blue
- 9A5F83
≈ Raspberry Jelly Red
- 956D34
≈ Vintage Caramel
- 3C8666
≈ Mythical Forest
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.58:1 · APCA Lc 72
Ag
AANa czerni
WCAG 4.58:1 · APCA Lc 30
Najlepszy kolor tekstu: #000000
WCAG 4.58:1 (AA) · APCA Lc 30
Contrast pairs
Fragmenty kodu
CSS
:root {
--sage-blossom-blue: #4e78a9;
--sage-blossom-blue-rgb: 78 120 169;
--sage-blossom-blue-oklch: oklch(0.563 0.09 253.1);
}
.element {
color: var(--sage-blossom-blue);
background-color: hsl(212 37% 48%);
border-color: oklch(0.563 0.09 253.1);
}Tailwind CSS v4
@theme {
--color-sage-blossom-blue: #4e78a9;
--color-sage-blossom-blue-50: #e4f7ff;
--color-sage-blossom-blue-100: #d4eaff;
--color-sage-blossom-blue-200: #bbd7fb;
--color-sage-blossom-blue-300: #99bae5;
--color-sage-blossom-blue-400: #78a2d3;
--color-sage-blossom-blue-500: #5a89c0;
--color-sage-blossom-blue-600: #4d74a2;
--color-sage-blossom-blue-700: #3d5d82;
--color-sage-blossom-blue-800: #2a4460;
--color-sage-blossom-blue-900: #1c2f44;
--color-sage-blossom-blue-950: #0c1c2c;
}SCSS
$sage-blossom-blue: #4e78a9;
$sage-blossom-blue-rgb: 78, 120, 169;
$sage-blossom-blue-light: mix(#fff, $sage-blossom-blue, 20%);
$sage-blossom-blue-dark: mix(#000, $sage-blossom-blue, 20%);
.element {
color: $sage-blossom-blue;
box-shadow: 0 0 0 2px rgba($sage-blossom-blue, 0.35);
}