Benannte Farbe · #677F86
Blue Thunder
Blue Thunder ist #677F86: rgb(103 127 134), hsl(194 13% 46%), oklch(0.58 0.03 217.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Blue Thunder color name →
#677F86
oklch(0.58 0.03 217.4)
Farbumrechnungen
- HEX
- #677f86
- RGB
- rgb(103 127 134)
- HSL
- hsl(194 13% 46%)
- HWB
- hwb(194 40% 47%)
- OKLCH
- oklch(0.58 0.03 217.4)
- OKLab
- oklab(0.58 -0.024 -0.018)
- CIE Lab
- lab(51.47 -7.74 -6.84)
- LCH
- lch(51.47 10.33 221.5)
- CMYK
- cmyk(23% 5% 0% 47%)
Tints · Shades · Tones
Tints
- 758B91
- 84979D
- 92A4A9
- A1B0B5
- B1BDC1
- C0CACD
- CFD7D9
- DFE4E6
- EFF2F2
Shades
- 596E74
- 4B5D62
- 3D4C51
- 303C40
- 232D30
- 171F21
- 0C1113
- 040606
- 000101
Tones
- 6A7F85
- 6C7F85
- 6F7F84
- 717F84
- 748083
- 768082
- 798082
- 7B8081
- 7E8081
Farbharmonien
Komplementär +180°
- 677F86
Blue Thunder
- 8B756E
≈ Soft Bark
Analog -30° +30°
- 677F86
Blue Thunder
- 67807D
≈ Aspen Valley
- 6D7C8B
≈ Lynch
Triadisch +120° +240°
- 677F86
Blue Thunder
- 877481
≈ Faded Orchid
- 7F7B67
≈ Mermaid
Geteilt komplementär +150° +210°
- 677F86
Blue Thunder
- 8B7377
≈ Plum Haze
- 877768
≈ Sage Green
Tetradisch +90° +180° +270°
- 677F86
Blue Thunder
- 7F7688
≈ Dull Mauve
- 8B756E
≈ Soft Bark
- 757E6B
≈ Greenland
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.23:1 · APCA Lc 69
Ag
AAAuf Schwarz
WCAG 4.95:1 · APCA Lc 32
Beste Textfarbe: #000000
WCAG 4.95:1 (AA) · APCA Lc 32
Contrast pairs
Code-Snippets
CSS
:root {
--blue-thunder: #677f86;
--blue-thunder-rgb: 103 127 134;
--blue-thunder-oklch: oklch(0.58 0.03 217.4);
}
.element {
color: var(--blue-thunder);
background-color: hsl(194 13% 46%);
border-color: oklch(0.58 0.03 217.4);
}Tailwind CSS v4
@theme {
--color-blue-thunder: #677f86;
--color-blue-thunder-50: #ecf7fb;
--color-blue-thunder-100: #deeaef;
--color-blue-thunder-200: #c7d8dd;
--color-blue-thunder-300: #a7bbc2;
--color-blue-thunder-400: #8ca3aa;
--color-blue-thunder-500: #718b93;
--color-blue-thunder-600: #5f767d;
--color-blue-thunder-700: #4c5e64;
--color-blue-thunder-800: #374549;
--color-blue-thunder-900: #263033;
--color-blue-thunder-950: #141c1e;
}SCSS
$blue-thunder: #677f86;
$blue-thunder-rgb: 103, 127, 134;
$blue-thunder-light: mix(#fff, $blue-thunder, 20%);
$blue-thunder-dark: mix(#000, $blue-thunder, 20%);
.element {
color: $blue-thunder;
box-shadow: 0 0 0 2px rgba($blue-thunder, 0.35);
}