Nazwany kolor · #597388
Thundering Clouds
Thundering Clouds to #597388: rgb(89 115 136), hsl(207 21% 44%), oklch(0.543 0.045 243). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Thundering Clouds color name →
#597388
oklch(0.543 0.045 243)
Konwersje koloru
- HEX
- #597388
- RGB
- rgb(89 115 136)
- HSL
- hsl(207 21% 44%)
- HWB
- hwb(207 35% 47%)
- OKLCH
- oklch(0.543 0.045 243)
- OKLab
- oklab(0.543 -0.02 -0.04)
- CIE Lab
- lab(46.98 -5.7 -14.82)
- LCH
- lch(46.98 15.88 249)
- CMYK
- cmyk(35% 15% 0% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 688093
- 788E9F
- 889BAB
- 98A9B6
- A9B7C2
- BAC5CE
- CBD3DA
- DCE2E6
- EDF0F3
Odcienie ciemniejsze
- 4C6375
- 405463
- 344552
- 283641
- 1D2831
- 131B22
- 090F13
- 030506
- 000101
Tony
- 5D7487
- 617687
- 657786
- 697885
- 6D7A84
- 717B83
- 757C83
- 787E82
- 7C7F81
Harmonie kolorów
Komplementarna +180°
- 597388
Thundering Clouds
- 836A55
≈ Pastel Brown
Analogowa -30° +30°
- 597388
Thundering Clouds
- 50777F
≈ Ocean Current
- 676E8A
≈ Dark Prince
Triada +120° +240°
- 597388
Thundering Clouds
- 87656D
≈ Mauving Up
- 6A7457
≈ Herb Cornucopia
Komplementarna rozszczepiona +150° +210°
- 597388
Thundering Clouds
- 88665F
≈ Baby Burro
- 786F52
≈ Conservation
Tetrada +90° +180° +270°
- 597388
Thundering Clouds
- 80667B
≈ Arctic Dusk
- 836A55
≈ Pastel Brown
- 5C7763
≈ Mt Burleigh
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.96:1 · APCA Lc 74
Ag
FailNa czerni
WCAG 4.23:1 · APCA Lc 27
Najlepszy kolor tekstu: #FFFFFF
WCAG 4.96:1 (AA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
CSS
:root {
--thundering-clouds: #597388;
--thundering-clouds-rgb: 89 115 136;
--thundering-clouds-oklch: oklch(0.543 0.045 243);
}
.element {
color: var(--thundering-clouds);
background-color: hsl(207 21% 44%);
border-color: oklch(0.543 0.045 243);
}Tailwind CSS v4
@theme {
--color-thundering-clouds: #597388;
--color-thundering-clouds-50: #ebf7ff;
--color-thundering-clouds-100: #dceaf6;
--color-thundering-clouds-200: #c5d7e7;
--color-thundering-clouds-300: #a5bacd;
--color-thundering-clouds-400: #88a2b7;
--color-thundering-clouds-500: #6d8aa2;
--color-thundering-clouds-600: #5c7589;
--color-thundering-clouds-700: #4a5e6e;
--color-thundering-clouds-800: #354551;
--color-thundering-clouds-900: #242f38;
--color-thundering-clouds-950: #131c23;
}SCSS
$thundering-clouds: #597388;
$thundering-clouds-rgb: 89, 115, 136;
$thundering-clouds-light: mix(#fff, $thundering-clouds, 20%);
$thundering-clouds-dark: mix(#000, $thundering-clouds, 20%);
.element {
color: $thundering-clouds;
box-shadow: 0 0 0 2px rgba($thundering-clouds, 0.35);
}