Benannte Farbe · #3F626E
Juniper Berry Blue
Juniper Berry Blue ist #3F626E: rgb(63 98 110), hsl(195 27% 34%), oklch(0.474 0.045 221.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Cyan mean? → · Juniper Berry Blue color name →
#3F626E
oklch(0.474 0.045 221.6)
Farbumrechnungen
- HEX
- #3f626e
- RGB
- rgb(63 98 110)
- HSL
- hsl(195 27% 34%)
- HWB
- hwb(195 25% 57%)
- OKLCH
- oklch(0.474 0.045 221.6)
- OKLab
- oklab(0.474 -0.033 -0.03)
- CIE Lab
- lab(39.25 -10.5 -11.04)
- LCH
- lch(39.25 15.24 226.4)
- CMYK
- cmyk(43% 11% 0% 57%)
Tints · Shades · Tones
Tints
- 51717C
- 637F89
- 768E97
- 889EA6
- 9BADB4
- AFBDC3
- C2CDD1
- D6DEE0
- EAEEF0
Shades
- 35545F
- 2C4750
- 233A41
- 1B2D33
- 122126
- 0A1619
- 040B0E
- 010304
- 000001
Tones
- 466570
- 4D6872
- 536B74
- 5A6E75
- 607177
- 677479
- 6D777B
- 737A7C
- 7A7D7E
Farbharmonien
Komplementär +180°
- 3F626E
Juniper Berry Blue
- 725448
≈ Hold Your Horses
Analog -30° +30°
- 3F626E
Juniper Berry Blue
- 3D6462
≈ Moor Pond Green
- 4A5E75
≈ Mountain River
Triadisch +120° +240°
- 3F626E
Juniper Berry Blue
- 6E5263
≈ Dark Olive Paste
- 615D40
≈ Shagbark Olive
Geteilt komplementär +150° +210°
- 3F626E
Juniper Berry Blue
- 735255
≈ Sheringa Rose
- 6C5840
≈ Tobacco Brown
Tetradisch +90° +180° +270°
- 3F626E
Juniper Berry Blue
- 64556F
≈ Rich Texture
- 725448
≈ Hold Your Horses
- 536247
≈ Nature Surrounds
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 6.59:1 · APCA Lc 83
Ag
FailAuf Schwarz
WCAG 3.18:1 · APCA Lc 19
Beste Textfarbe: #FFFFFF
WCAG 6.59:1 (AA) · APCA Lc 83
Contrast pairs
Code-Snippets
CSS
:root {
--juniper-berry-blue: #3f626e;
--juniper-berry-blue-rgb: 63 98 110;
--juniper-berry-blue-oklch: oklch(0.474 0.045 221.6);
}
.element {
color: var(--juniper-berry-blue);
background-color: hsl(195 27% 34%);
border-color: oklch(0.474 0.045 221.6);
}Tailwind CSS v4
@theme {
--color-juniper-berry-blue: #3f626e;
--color-juniper-berry-blue-50: #e8f8ff;
--color-juniper-berry-blue-100: #d9ecf3;
--color-juniper-berry-blue-200: #c1d9e2;
--color-juniper-berry-blue-300: #a0bdc8;
--color-juniper-berry-blue-400: #82a5b1;
--color-juniper-berry-blue-500: #658d9b;
--color-juniper-berry-blue-600: #567883;
--color-juniper-berry-blue-700: #446069;
--color-juniper-berry-blue-800: #31464d;
--color-juniper-berry-blue-900: #213136;
--color-juniper-berry-blue-950: #101d21;
}SCSS
$juniper-berry-blue: #3f626e;
$juniper-berry-blue-rgb: 63, 98, 110;
$juniper-berry-blue-light: mix(#fff, $juniper-berry-blue, 20%);
$juniper-berry-blue-dark: mix(#000, $juniper-berry-blue, 20%);
.element {
color: $juniper-berry-blue;
box-shadow: 0 0 0 2px rgba($juniper-berry-blue, 0.35);
}