Nazwany kolor · #185887
Stunning Sapphire
Stunning Sapphire to #185887: rgb(24 88 135), hsl(205 70% 31%), oklch(0.445 0.099 245.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Stunning Sapphire color name →
#185887
oklch(0.445 0.099 245.4)
Konwersje koloru
- HEX
- #185887
- RGB
- rgb(24 88 135)
- HSL
- hsl(205 70% 31%)
- HWB
- hwb(205 9% 47%)
- OKLCH
- oklch(0.445 0.099 245.4)
- OKLab
- oklab(0.445 -0.041 -0.09)
- CIE Lab
- lab(35.34 -6.69 -32.47)
- LCH
- lch(35.34 33.15 258.4)
- CMYK
- cmyk(82% 35% 0% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 336893
- 4A789F
- 6088AB
- 7699B7
- 8CA9C3
- A2BACF
- B9CBDB
- D0DCE7
- E7EDF3
Odcienie ciemniejsze
- 134B75
- 0F3F63
- 0A3351
- 072841
- 041D31
- 021221
- 010913
- 000306
- 000001
Tony
- 275C87
- 336186
- 3E6586
- 486985
- 526D85
- 5B7184
- 657583
- 6E7982
- 777C81
Harmonie kolorów
Komplementarna +180°
- 185887
Stunning Sapphire
- 784600
≈ Dusky Brown
Analogowa -30° +30°
- 185887
Stunning Sapphire
- 005E6F
≈ Shaded Spruce
- 454E8A
≈ Beaded Blue
Triada +120° +240°
- 185887
Stunning Sapphire
- 80394C
≈ Camelot
- 475D16
≈ Kyuri Green
Komplementarna rozszczepiona +150° +210°
- 185887
Stunning Sapphire
- 823D2B
≈ Grill Master
- 645300
≈ Olive Brown
Tetrada +90° +180° +270°
- 185887
Stunning Sapphire
- 753D69
≈ Burnt Orchid
- 784600
≈ Dusky Brown
- 15643B
≈ Fun Green
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.54:1 · APCA Lc 86
Ag
FailNa czerni
WCAG 2.78:1 · APCA Lc 16
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.54:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
CSS
:root {
--stunning-sapphire: #185887;
--stunning-sapphire-rgb: 24 88 135;
--stunning-sapphire-oklch: oklch(0.445 0.099 245.4);
}
.element {
color: var(--stunning-sapphire);
background-color: hsl(205 70% 31%);
border-color: oklch(0.445 0.099 245.4);
}Tailwind CSS v4
@theme {
--color-stunning-sapphire: #185887;
--color-stunning-sapphire-50: #dff9ff;
--color-stunning-sapphire-100: #ceecff;
--color-stunning-sapphire-200: #b3d9fd;
--color-stunning-sapphire-300: #8ebde8;
--color-stunning-sapphire-400: #6ba4d6;
--color-stunning-sapphire-500: #488cc4;
--color-stunning-sapphire-600: #3e77a5;
--color-stunning-sapphire-700: #315f85;
--color-stunning-sapphire-800: #204662;
--color-stunning-sapphire-900: #153045;
--color-stunning-sapphire-950: #071c2d;
}SCSS
$stunning-sapphire: #185887;
$stunning-sapphire-rgb: 24, 88, 135;
$stunning-sapphire-light: mix(#fff, $stunning-sapphire, 20%);
$stunning-sapphire-dark: mix(#000, $stunning-sapphire, 20%);
.element {
color: $stunning-sapphire;
box-shadow: 0 0 0 2px rgba($stunning-sapphire, 0.35);
}