Benannte Farbe · #9BAFD0
Heartsong
Heartsong ist #9BAFD0: rgb(155 175 208), hsl(217 36% 71%), oklch(0.75 0.053 260.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Heartsong color name →
#9BAFD0
oklch(0.75 0.053 260.4)
Farbumrechnungen
- HEX
- #9bafd0
- RGB
- rgb(155 175 208)
- HSL
- hsl(217 36% 71%)
- HWB
- hwb(217 61% 18%)
- OKLCH
- oklch(0.75 0.053 260.4)
- OKLab
- oklab(0.75 -0.009 -0.052)
- CIE Lab
- lab(70.77 -1.63 -19.26)
- LCH
- lch(70.77 19.33 265.2)
- CMYK
- cmyk(25% 16% 0% 18%)
Tints · Shades · Tones
Tints
- A5B7D5
- AEBFDA
- B8C7DE
- C2CFE3
- CCD7E8
- D6DFEC
- E0E7F1
- EAEFF6
- F5F7FA
Shades
- 8698B5
- 72819A
- 5E6B80
- 4B5667
- 39414F
- 282E39
- 181C23
- 090B10
- 010102
Tones
- 98AAC8
- 96A5C0
- 93A1B8
- 909CAF
- 8E97A7
- 8B939F
- 888E98
- 858990
- 838588
Farbharmonien
Komplementär +180°
- 9BAFD0
Heartsong
- C0AB89
≈ Olive Gold
Analog -30° +30°
- 9BAFD0
Heartsong
- 8CB5C9
≈ Pond Blue
- ADA9CE
≈ Violet Mix
Triadisch +120° +240°
- 9BAFD0
Heartsong
- CDA1A0
≈ Sakura Mochi
- 9DB797
≈ Brookview
Geteilt komplementär +150° +210°
- 9BAFD0
Heartsong
- CAA590
≈ Moenkopi Soil
- AFB18B
≈ Lint
Tetradisch +90° +180° +270°
- 9BAFD0
Heartsong
- C9A1B2
≈ Taste of Berry
- C0AB89
≈ Olive Gold
- 8DB9A9
≈ Lichen
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.22:1 · APCA Lc 44
Ag
AAAAuf Schwarz
WCAG 9.43:1 · APCA Lc 58
Beste Textfarbe: #000000
WCAG 9.43:1 (AAA) · APCA Lc 58
Contrast pairs
Code-Snippets
CSS
:root {
--heartsong: #9bafd0;
--heartsong-rgb: 155 175 208;
--heartsong-oklch: oklch(0.75 0.053 260.4);
}
.element {
color: var(--heartsong);
background-color: hsl(217 36% 71%);
border-color: oklch(0.75 0.053 260.4);
}Tailwind CSS v4
@theme {
--color-heartsong: #9bafd0;
--color-heartsong-50: #edf6ff;
--color-heartsong-100: #dfe8fa;
--color-heartsong-200: #c8d5ec;
--color-heartsong-300: #a9b8d3;
--color-heartsong-400: #8d9fbe;
--color-heartsong-500: #7287aa;
--color-heartsong-600: #61728f;
--color-heartsong-700: #4d5b73;
--color-heartsong-800: #374355;
--color-heartsong-900: #262e3b;
--color-heartsong-950: #141b25;
}SCSS
$heartsong: #9bafd0;
$heartsong-rgb: 155, 175, 208;
$heartsong-light: mix(#fff, $heartsong, 20%);
$heartsong-dark: mix(#000, $heartsong, 20%);
.element {
color: $heartsong;
box-shadow: 0 0 0 2px rgba($heartsong, 0.35);
}