Benannte Farbe · #00BB22
Pedestrian Green
Pedestrian Green ist #00BB22: rgb(0 187 34), hsl(131 100% 37%), oklch(0.687 0.225 143.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Green mean? → · Pedestrian Green color name →
#00BB22
oklch(0.687 0.225 143.7)
Farbumrechnungen
- HEX
- #00bb22
- RGB
- rgb(0 187 34)
- HSL
- hsl(131 100% 37%)
- HWB
- hwb(131 0% 27%)
- OKLCH
- oklch(0.687 0.225 143.7)
- OKLab
- oklab(0.687 -0.181 0.133)
- CIE Lab
- lab(66.31 -61.95 58.58)
- LCH
- lch(66.31 85.27 136.6)
- CMYK
- cmyk(100% 0% 82% 27%)
Tints · Shades · Tones
Tints
- 3EC344
- 5CCA5D
- 74D173
- 8AD888
- 9FDF9C
- B3E6B0
- C6ECC4
- D9F3D8
- ECF9EB
Shades
- 00A21C
- 008A16
- 007311
- 005C0B
- 004607
- 003203
- 001F01
- 000D00
- 000200
Tones
- 2DB635
- 40B043
- 4DAA4E
- 58A557
- 619F60
- 699967
- 6F936E
- 768D74
- 7B867A
Farbharmonien
Komplementär +180°
- 00BB22
Pedestrian Green
- DA5DE8
≈ Clematis Magenta
Analog -30° +30°
- 00BB22
Pedestrian Green
- 9BA400
≈ Fistfull of Green
- 00B494
≈ Aloha
Triadisch +120° +240°
- 00BB22
Pedestrian Green
- 6596FF
≈ Blue Chaos
- FF595A
≈ Grapefruit
Geteilt komplementär +150° +210°
- 00BB22
Pedestrian Green
- A27FFF
≈ Purple Illusionist
- FC4BA5
≈ Barbie Pink
Tetradisch +90° +180° +270°
- 00BB22
Pedestrian Green
- 00A7E5
≈ Huelveño Horizon
- DA5DE8
≈ Clematis Magenta
- EA7600
≈ Mee-hua Sunset
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.58:1 · APCA Lc 50
Ag
AAAAuf Schwarz
WCAG 8.13:1 · APCA Lc 52
Beste Textfarbe: #000000
WCAG 8.13:1 (AAA) · APCA Lc 52
Contrast pairs
Code-Snippets
CSS
:root {
--pedestrian-green: #00bb22;
--pedestrian-green-rgb: 0 187 34;
--pedestrian-green-oklch: oklch(0.687 0.225 143.7);
}
.element {
color: var(--pedestrian-green);
background-color: hsl(131 100% 37%);
border-color: oklch(0.687 0.225 143.7);
}Tailwind CSS v4
@theme {
--color-pedestrian-green: #00bb22;
--color-pedestrian-green-50: #ccffcf;
--color-pedestrian-green-100: #b7fdba;
--color-pedestrian-green-200: #92ee98;
--color-pedestrian-green-300: #5ed56b;
--color-pedestrian-green-400: #28be34;
--color-pedestrian-green-500: #00a700;
--color-pedestrian-green-600: #008e00;
--color-pedestrian-green-700: #007200;
--color-pedestrian-green-800: #005300;
--color-pedestrian-green-900: #003a00;
--color-pedestrian-green-950: #002400;
}SCSS
$pedestrian-green: #00bb22;
$pedestrian-green-rgb: 0, 187, 34;
$pedestrian-green-light: mix(#fff, $pedestrian-green, 20%);
$pedestrian-green-dark: mix(#000, $pedestrian-green, 20%);
.element {
color: $pedestrian-green;
box-shadow: 0 0 0 2px rgba($pedestrian-green, 0.35);
}