Benannte Farbe · #447A66
Leaping Lizard
Leaping Lizard ist #447A66: rgb(68 122 102), hsl(158 28% 37%), oklch(0.536 0.066 168). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Green mean? → · Leaping Lizard color name →
#447A66
oklch(0.536 0.066 168)
Farbumrechnungen
- HEX
- #447a66
- RGB
- rgb(68 122 102)
- HSL
- hsl(158 28% 37%)
- HWB
- hwb(158 27% 52%)
- OKLCH
- oklch(0.536 0.066 168)
- OKLab
- oklab(0.536 -0.065 0.014)
- CIE Lab
- lab(47.03 -22.63 5.11)
- LCH
- lch(47.03 23.2 167.3)
- CMYK
- cmyk(44% 0% 16% 52%)
Tints · Shades · Tones
Tints
- 578774
- 699383
- 7BA091
- 8EADA0
- A0BBAF
- B3C8BF
- C5D6CF
- D8E3DF
- ECF1EF
Shades
- 3A6958
- 30594A
- 26493C
- 1D3A2F
- 142B23
- 0C1D17
- 05100C
- 020504
- 000100
Tones
- 4B7B69
- 527B6B
- 587C6E
- 5E7D70
- 647D73
- 6A7E76
- 707E78
- 757F7B
- 7B807D
Farbharmonien
Komplementär +180°
- 447A66
Leaping Lizard
- 8B5E74
≈ Grape Nectar
Analog -30° +30°
- 447A66
Leaping Lizard
- 5A7751
≈ Willow Bough
- 38797B
≈ Grand Canal
Triadisch +120° +240°
- 447A66
Leaping Lizard
- 6B6792
≈ Wild Wisteria
- 8E624B
≈ Weathered Leather
Geteilt komplementär +150° +210°
- 447A66
Leaping Lizard
- 7E6187
≈ Dusty Purple
- 905E5F
≈ Spiced Potpourri
Tetradisch +90° +180° +270°
- 447A66
Leaping Lizard
- 556F94
≈ Charter Blue
- 8B5E74
≈ Grape Nectar
- 836940
≈ Blue Cheese Olive
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 4.97:1 · APCA Lc 74
Ag
FailAuf Schwarz
WCAG 4.22:1 · APCA Lc 27
Beste Textfarbe: #FFFFFF
WCAG 4.97:1 (AA) · APCA Lc 74
Contrast pairs
Code-Snippets
CSS
:root {
--leaping-lizard: #447a66;
--leaping-lizard-rgb: 68 122 102;
--leaping-lizard-oklch: oklch(0.536 0.066 168);
}
.element {
color: var(--leaping-lizard);
background-color: hsl(158 28% 37%);
border-color: oklch(0.536 0.066 168);
}Tailwind CSS v4
@theme {
--color-leaping-lizard: #447a66;
--color-leaping-lizard-50: #e4fcf2;
--color-leaping-lizard-100: #d3f0e4;
--color-leaping-lizard-200: #b9ded0;
--color-leaping-lizard-300: #96c3b2;
--color-leaping-lizard-400: #77ab97;
--color-leaping-lizard-500: #58957e;
--color-leaping-lizard-600: #4b7e6a;
--color-leaping-lizard-700: #3c6555;
--color-leaping-lizard-800: #2b4a3d;
--color-leaping-lizard-900: #1d332a;
--color-leaping-lizard-950: #0d1f18;
}SCSS
$leaping-lizard: #447a66;
$leaping-lizard-rgb: 68, 122, 102;
$leaping-lizard-light: mix(#fff, $leaping-lizard, 20%);
$leaping-lizard-dark: mix(#000, $leaping-lizard, 20%);
.element {
color: $leaping-lizard;
box-shadow: 0 0 0 2px rgba($leaping-lizard, 0.35);
}