Benannte Farbe · #57AA80
Julep
Julep ist #57AA80: rgb(87 170 128), hsl(150 33% 50%), oklch(0.674 0.104 159.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Green mean? → · Julep color name →
#57AA80
oklch(0.674 0.104 159.8)
Farbumrechnungen
- HEX
- #57aa80
- RGB
- rgb(87 170 128)
- HSL
- hsl(150 33% 50%)
- HWB
- hwb(150 34% 33%)
- OKLCH
- oklch(0.674 0.104 159.8)
- OKLab
- oklab(0.674 -0.097 0.036)
- CIE Lab
- lab(63.55 -34.02 13.6)
- LCH
- lch(63.55 36.64 158.2)
- CMYK
- cmyk(49% 0% 25% 33%)
Tints · Shades · Tones
Tints
- 6AB28C
- 7BBB98
- 8CC3A5
- 9DCCB1
- ADD4BE
- BEDDCB
- CEE5D8
- DEEEE5
- EFF6F2
Shades
- 4B936E
- 3E7D5D
- 33684D
- 27533D
- 1C3F2E
- 122D1F
- 081B12
- 030B06
- 000101
Tones
- 5DA680
- 63A280
- 689E80
- 6C9980
- 709580
- 749180
- 778D80
- 7A8980
- 7D8480
Farbharmonien
Komplementär +180°
- 57AA80
Julep
- C17DAB
≈ Hollyhock Blossom Pink
Analog -30° +30°
Triadisch +120° +240°
- 57AA80
Julep
- 8A8FD5
≈ Adora
- CD8065
≈ Burning Sand
Geteilt komplementär +150° +210°
- 57AA80
Julep
- AA84C6
≈ Lilac Purple
- CD7B88
≈ Dusky Pink
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.81:1 · APCA Lc 54
Ag
AAAAuf Schwarz
WCAG 7.46:1 · APCA Lc 48
Beste Textfarbe: #000000
WCAG 7.46:1 (AAA) · APCA Lc 48
Contrast pairs
Code-Snippets
CSS
:root {
--julep: #57aa80;
--julep-rgb: 87 170 128;
--julep-oklch: oklch(0.674 0.104 159.8);
}
.element {
color: var(--julep);
background-color: hsl(150 33% 50%);
border-color: oklch(0.674 0.104 159.8);
}Tailwind CSS v4
@theme {
--color-julep: #57aa80;
--color-julep-50: #dcffec;
--color-julep-100: #caf3dd;
--color-julep-200: #ade3c7;
--color-julep-300: #86c8a7;
--color-julep-400: #64b189;
--color-julep-500: #3b9b6e;
--color-julep-600: #34835d;
--color-julep-700: #29694a;
--color-julep-800: #1e4d34;
--color-julep-900: #143624;
--color-julep-950: #052112;
}SCSS
$julep: #57aa80;
$julep-rgb: 87, 170, 128;
$julep-light: mix(#fff, $julep, 20%);
$julep-dark: mix(#000, $julep, 20%);
.element {
color: $julep;
box-shadow: 0 0 0 2px rgba($julep, 0.35);
}