Benannte Farbe · #5A8299
Bountiful Blue
Bountiful Blue ist #5A8299: rgb(90 130 153), hsl(202 26% 48%), oklch(0.586 0.057 234.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Bountiful Blue color name →
#5A8299
oklch(0.586 0.057 234.3)
Farbumrechnungen
- HEX
- #5a8299
- RGB
- rgb(90 130 153)
- HSL
- hsl(202 26% 48%)
- HWB
- hwb(202 35% 40%)
- OKLCH
- oklch(0.586 0.057 234.3)
- OKLab
- oklab(0.586 -0.033 -0.046)
- CIE Lab
- lab(52.07 -9.72 -17.07)
- LCH
- lch(52.07 19.64 240.3)
- CMYK
- cmyk(41% 15% 0% 40%)
Tints · Shades · Tones
Tints
- 6A8EA3
- 7A9AAD
- 8AA6B7
- 9AB3C1
- ABBFCB
- BBCCD6
- CCD8E0
- DDE5EA
- EEF2F5
Shades
- 4D7084
- 415F70
- 354E5D
- 293E4A
- 1E2F38
- 132027
- 091217
- 030608
- 000101
Tones
- 5E8297
- 628294
- 668292
- 6A818F
- 6E818D
- 72818A
- 768188
- 798185
- 7D8083
Farbharmonien
Komplementär +180°
- 5A8299
Bountiful Blue
- 97735C
≈ Whisky Barrel
Analog -30° +30°
- 5A8299
Bountiful Blue
- 51868C
≈ Flounce
- 6B7C9E
≈ Quantum Blue
Triadisch +120° +240°
- 5A8299
Bountiful Blue
- 986E7E
≈ Heritage Taffeta
- 7B8059
≈ Frond
Geteilt komplementär +150° +210°
- 5A8299
Bountiful Blue
- 9B6F6B
≈ Bologna
- 8C7A55
≈ Woven Basket
Tetradisch +90° +180° +270°
- 5A8299
Bountiful Blue
- 8D718F
≈ Wine Stroll
- 97735C
≈ Whisky Barrel
- 688567
≈ Christmas Holly
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.12:1 · APCA Lc 68
Ag
AAAuf Schwarz
WCAG 5.08:1 · APCA Lc 33
Beste Textfarbe: #000000
WCAG 5.08:1 (AA) · APCA Lc 33
Contrast pairs
Code-Snippets
CSS
:root {
--bountiful-blue: #5a8299;
--bountiful-blue-rgb: 90 130 153;
--bountiful-blue-oklch: oklch(0.586 0.057 234.3);
}
.element {
color: var(--bountiful-blue);
background-color: hsl(202 26% 48%);
border-color: oklch(0.586 0.057 234.3);
}Tailwind CSS v4
@theme {
--color-bountiful-blue: #5a8299;
--color-bountiful-blue-50: #e7f8ff;
--color-bountiful-blue-100: #d7ebf9;
--color-bountiful-blue-200: #bed9ea;
--color-bountiful-blue-300: #9cbdd1;
--color-bountiful-blue-400: #7ea5bb;
--color-bountiful-blue-500: #608da6;
--color-bountiful-blue-600: #52778d;
--color-bountiful-blue-700: #415f71;
--color-bountiful-blue-800: #2e4653;
--color-bountiful-blue-900: #1f303a;
--color-bountiful-blue-950: #0f1d24;
}SCSS
$bountiful-blue: #5a8299;
$bountiful-blue-rgb: 90, 130, 153;
$bountiful-blue-light: mix(#fff, $bountiful-blue, 20%);
$bountiful-blue-dark: mix(#000, $bountiful-blue, 20%);
.element {
color: $bountiful-blue;
box-shadow: 0 0 0 2px rgba($bountiful-blue, 0.35);
}