Cor nomeada · #00BB22
Pedestrian Green
Pedestrian Green é #00BB22: rgb(0 187 34), hsl(131 100% 37%), oklch(0.687 0.225 143.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Green mean? → · Pedestrian Green color name →
#00BB22
oklch(0.687 0.225 143.7)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- 3EC344
- 5CCA5D
- 74D173
- 8AD888
- 9FDF9C
- B3E6B0
- C6ECC4
- D9F3D8
- ECF9EB
Sombras
- 00A21C
- 008A16
- 007311
- 005C0B
- 004607
- 003203
- 001F01
- 000D00
- 000200
Tons
- 2DB635
- 40B043
- 4DAA4E
- 58A557
- 619F60
- 699967
- 6F936E
- 768D74
- 7B867A
Harmonias de cor
Complementar +180°
- 00BB22
Pedestrian Green
- DA5DE8
≈ Clematis Magenta
Análoga -30° +30°
- 00BB22
Pedestrian Green
- 9BA400
≈ Fistfull of Green
- 00B494
≈ Aloha
Tríade +120° +240°
- 00BB22
Pedestrian Green
- 6596FF
≈ Blue Chaos
- FF595A
≈ Grapefruit
Complementar dividida +150° +210°
- 00BB22
Pedestrian Green
- A27FFF
≈ Purple Illusionist
- FC4BA5
≈ Barbie Pink
Tétrade +90° +180° +270°
- 00BB22
Pedestrian Green
- 00A7E5
≈ Huelveño Horizon
- DA5DE8
≈ Clematis Magenta
- EA7600
≈ Mee-hua Sunset
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.58:1 · APCA Lc 50
Ag
AAASobre preto
WCAG 8.13:1 · APCA Lc 52
Melhor cor de texto: #000000
WCAG 8.13:1 (AAA) · APCA Lc 52
Contrast pairs
Trechos de código
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);
}