Benannte Farbe · #74918E
Juniper
Juniper ist #74918E: rgb(116 145 142), hsl(174 12% 51%), oklch(0.634 0.033 188.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Juniper color name →
#74918E
oklch(0.634 0.033 188.6)
Farbumrechnungen
- HEX
- #74918e
- RGB
- rgb(116 145 142)
- HSL
- hsl(174 12% 51%)
- HWB
- hwb(174 45% 43%)
- OKLCH
- oklch(0.634 0.033 188.6)
- OKLab
- oklab(0.634 -0.033 -0.005)
- CIE Lab
- lab(57.87 -11.08 -1.96)
- LCH
- lch(57.87 11.25 190)
- CMYK
- cmyk(20% 0% 2% 43%)
Tints · Shades · Tones
Tints
- 819C99
- 8FA6A4
- 9CB1AF
- AABCBA
- B8C7C5
- C6D2D0
- D4DDDC
- E2E8E7
- F0F4F3
Shades
- 647D7B
- 546A68
- 455856
- 374644
- 293534
- 1B2524
- 0F1515
- 050707
- 010101
Tones
- 758F8D
- 778E8B
- 788C8A
- 798A88
- 7B8987
- 7C8786
- 7D8584
- 7E8383
- 7F8281
Farbharmonien
Komplementär +180°
- 74918E
Juniper
- 9D8286
≈ Plumville
Analog -30° +30°
- 74918E
Juniper
- 7A9183
≈ Cyanara
- 748F98
≈ Sheltered Bay
Triadisch +120° +240°
- 74918E
Juniper
- 90859A
≈ Purple Ash
- 988775
≈ Bedbox
Geteilt komplementär +150° +210°
- 74918E
Juniper
- 988391
≈ Quixotic
- 9D847C
≈ Pigeon Pink
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.39:1 · APCA Lc 61
Ag
AAAuf Schwarz
WCAG 6.18:1 · APCA Lc 40
Beste Textfarbe: #000000
WCAG 6.18:1 (AA) · APCA Lc 40
Contrast pairs
Code-Snippets
CSS
:root {
--juniper: #74918e;
--juniper-rgb: 116 145 142;
--juniper-oklch: oklch(0.634 0.033 188.6);
}
.element {
color: var(--juniper);
background-color: hsl(174 12% 51%);
border-color: oklch(0.634 0.033 188.6);
}Tailwind CSS v4
@theme {
--color-juniper: #74918e;
--color-juniper-50: #ebf8f7;
--color-juniper-100: #dcecea;
--color-juniper-200: #c5d9d7;
--color-juniper-300: #a5bdbb;
--color-juniper-400: #89a5a2;
--color-juniper-500: #6e8e8a;
--color-juniper-600: #5d7875;
--color-juniper-700: #4a605e;
--color-juniper-800: #364644;
--color-juniper-900: #25312f;
--color-juniper-950: #131d1c;
}SCSS
$juniper: #74918e;
$juniper-rgb: 116, 145, 142;
$juniper-light: mix(#fff, $juniper, 20%);
$juniper-dark: mix(#000, $juniper, 20%);
.element {
color: $juniper;
box-shadow: 0 0 0 2px rgba($juniper, 0.35);
}