Cor nomeada · #33FF00
Signal Green
Signal Green é #33FF00: rgb(51 255 0), hsl(108 100% 50%), oklch(0.87 0.29 141.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Green mean? → · Signal Green color name →
#33FF00
oklch(0.87 0.29 141.5)
Conversões de cor
- HEX
- #33ff00
- RGB
- rgb(51 255 0)
- HSL
- hsl(108 100% 50%)
- HWB
- hwb(108 0% 0%)
- OKLCH
- oklch(0.87 0.29 141.5)
- OKLab
- oklab(0.87 -0.227 0.18)
- CIE Lab
- lab(88.17 -76.25 81.45)
- LCH
- lch(88.17 111.57 133.1)
- CMYK
- cmyk(80% 0% 100% 0%)
Tons claros · Sombras · Tons
Tons claros
- 5BFF45
- 75FF64
- 8CFF7D
- 9FFF92
- B1FFA6
- C2FFB9
- D2FFCB
- E2FFDD
- F0FFEE
Sombras
- 2BDE00
- 23BE00
- 1C9E00
- 148000
- 0D6300
- 074800
- 032E00
- 011600
- 000300
Tons
- 4AF232
- 58E647
- 63D954
- 6BCC5F
- 72C067
- 76B36E
- 7AA674
- 7D9A79
- 7F8D7D
Harmonias de cor
Complementar +180°
- 33FF00
Signal Green
- F5BDFF
≈ Electric Lavender
Análoga -30° +30°
- 33FF00
Signal Green
- DADF00
≈ Golden Gun
- 00F7C6
≈ Bright Teal
Tríade +120° +240°
- 33FF00
Signal Green
- BDD5FF
≈ Oh Boy!
- FFC3C0
≈ Ladylike
Complementar dividida +150° +210°
- 33FF00
Signal Green
- D4CDFF
≈ Lavender Blue
- FFBFDA
≈ Cotton Candy
Tétrade +90° +180° +270°
- 33FF00
Signal Green
- 9FDEFF
≈ Columbia Blue
- F5BDFF
≈ Electric Lavender
- FFC6A6
≈ Bright Citrus
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.35:1 · APCA Lc 17
Ag
AAASobre preto
WCAG 15.44:1 · APCA Lc 87
Melhor cor de texto: #000000
WCAG 15.44:1 (AAA) · APCA Lc 87
Contrast pairs
Trechos de código
CSS
:root {
--signal-green: #33ff00;
--signal-green-rgb: 51 255 0;
--signal-green-oklch: oklch(0.87 0.29 141.5);
}
.element {
color: var(--signal-green);
background-color: hsl(108 100% 50%);
border-color: oklch(0.87 0.29 141.5);
}Tailwind CSS v4
@theme {
--color-signal-green: #33ff00;
--color-signal-green-50: #c3ffbf;
--color-signal-green-100: #abffa8;
--color-signal-green-200: #80f37e;
--color-signal-green-300: #3bda42;
--color-signal-green-400: #00c300;
--color-signal-green-500: #00ad00;
--color-signal-green-600: #009200;
--color-signal-green-700: #007500;
--color-signal-green-800: #005600;
--color-signal-green-900: #003c00;
--color-signal-green-950: #002500;
}SCSS
$signal-green: #33ff00;
$signal-green-rgb: 51, 255, 0;
$signal-green-light: mix(#fff, $signal-green, 20%);
$signal-green-dark: mix(#000, $signal-green, 20%);
.element {
color: $signal-green;
box-shadow: 0 0 0 2px rgba($signal-green, 0.35);
}