Nazwany kolor · #558F91
Bristol Blue
Bristol Blue to #558F91: rgb(85 143 145), hsl(182 26% 45%), oklch(0.611 0.061 198.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Bristol Blue color name →
#558F91
oklch(0.611 0.061 198.5)
Konwersje koloru
- HEX
- #558f91
- RGB
- rgb(85 143 145)
- HSL
- hsl(182 26% 45%)
- HWB
- hwb(182 33% 43%)
- OKLCH
- oklch(0.611 0.061 198.5)
- OKLab
- oklab(0.611 -0.058 -0.019)
- CIE Lab
- lab(55.51 -19.39 -7.38)
- LCH
- lch(55.51 20.74 200.8)
- CMYK
- cmyk(41% 1% 0% 43%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 669A9B
- 77A5A6
- 88B0B1
- 99BBBC
- AAC6C7
- BBD1D2
- CBDCDD
- DDE8E8
- EEF3F4
Odcienie ciemniejsze
- 497C7D
- 3D696A
- 315758
- 264546
- 1C3435
- 112425
- 081515
- 020707
- 000101
Tony
- 5A8E8F
- 608C8E
- 648B8C
- 69898A
- 6D8889
- 718687
- 758585
- 798383
- 7D8282
Harmonie kolorów
Komplementarna +180°
- 558F91
Bristol Blue
- A57575
≈ Dusky Haze
Analogowa -30° +30°
- 558F91
Bristol Blue
- 5E907D
≈ Sheffield
- 5C8BA1
≈ Georgian Revival Blue
Triada +120° +240°
- 558F91
Bristol Blue
- 93789B
≈ Vestige
- 987F59
≈ Branching-Out Olive
Komplementarna rozszczepiona +150° +210°
- 558F91
Bristol Blue
- A0758A
≈ Upper Crust
- A27963
≈ Walking Stick
Tetrada +90° +180° +270°
- 558F91
Bristol Blue
- 827EA6
≈ Second Pour
- A57575
≈ Dusky Haze
- 86875C
≈ Iguana
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.66:1 · APCA Lc 64
Ag
AANa czerni
WCAG 5.72:1 · APCA Lc 37
Najlepszy kolor tekstu: #000000
WCAG 5.72:1 (AA) · APCA Lc 37
Contrast pairs
Fragmenty kodu
CSS
:root {
--bristol-blue: #558f91;
--bristol-blue-rgb: 85 143 145;
--bristol-blue-oklch: oklch(0.611 0.061 198.5);
}
.element {
color: var(--bristol-blue);
background-color: hsl(182 26% 45%);
border-color: oklch(0.611 0.061 198.5);
}Tailwind CSS v4
@theme {
--color-bristol-blue: #558f91;
--color-bristol-blue-50: #e2fbfc;
--color-bristol-blue-100: #d1eef0;
--color-bristol-blue-200: #b7dddf;
--color-bristol-blue-300: #93c1c4;
--color-bristol-blue-400: #73aaac;
--color-bristol-blue-500: #519395;
--color-bristol-blue-600: #467c7e;
--color-bristol-blue-700: #386365;
--color-bristol-blue-800: #274949;
--color-bristol-blue-900: #1a3333;
--color-bristol-blue-950: #0a1e1f;
}SCSS
$bristol-blue: #558f91;
$bristol-blue-rgb: 85, 143, 145;
$bristol-blue-light: mix(#fff, $bristol-blue, 20%);
$bristol-blue-dark: mix(#000, $bristol-blue, 20%);
.element {
color: $bristol-blue;
box-shadow: 0 0 0 2px rgba($bristol-blue, 0.35);
}