shadcn Green en OKLCH
Quick answer: shadcn Green es #22C55E, que convierte a oklch(0.723 0.192 149.60). Sobre blanco, tiene una relación de contraste WCAG de 2.28:1 y un puntaje APCA de Lc +44.33.
Esto no alcanza el umbral de texto grande AA de WCAG 2.2 (3:1) sobre blanco. Combínalo con un primer plano más oscuro. Los colores base OKLCH usados aquí están disponibles en shadcn/ui desde la actualización de Tailwind v4 (February 2025), con 92% de soporte global en navegadores para la notación OKLCH (caniuse, April 2026).
shadcn Green es un token de tema de shadcn. Esta página presenta #22C55E como token de tema: pega los bloques :root y .dark de abajo para aplicar el tema a todos los componentes a la vez.
Especificaciones
Mayor contraste: black
Lente de accesibilidad
- Base#22C55E
- 300#7BDF91
- 500#22C55E
- 700#007623
Toggle a lens to preview this color under color vision differences.
¿Cómo pasa shadcn Green de primitivo a componente?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #22C55E
- oklch
- oklch(0.723 0.192 149.60)
Semantic
Bound to a role token that UI reads by name.
--primary: #22C55EOne primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.
Component
Applied to real UI across states.
On-color text: black (9.22:1 on #22C55E).
¿Cómo escala shadcn Green de 50 a 950?
- 50oklch(0.970 0.038 150.05)
- 100oklch(0.920 0.067 149.53)
- 200oklch(0.872 0.107 149.46)
- 300oklch(0.823 0.145 149.44)
- 400oklch(0.773 0.173 149.50)
- 500oklch(0.723 0.192 149.58)
- 600oklch(0.607 0.175 148.05)
- 700oklch(0.492 0.150 146.02)
- 800oklch(0.378 0.121 144.49)
- 900oklch(0.257 0.088 142.50)
- 950oklch(0.142 0.048 142.50)
¿Qué puntaje obtiene shadcn Green en contraste WCAG 2.2?
Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.
¿shadcn Green cumple WCAG 2.2 sobre fondos neutros comunes?
- Aa2.28Below AA
Blanco #FFFFFF
- Aa2.09Below AA
Neutro 100 #F5F5F5
- Aa1.81Below AA
Neutro 200 #E5E5E5
- Aa1.11Below AA
Neutro 400 #A3A3A3
- Aa3.43Below AA
Neutro 600 #525252
- Aa7.87AAA
Neutro 900 #171717
- Aa9.22AAA
Negro #000000
¿Qué paletas combinan con shadcn Green?
Análogos
- #6EC522
- #2AC522
- #22C55E
- #22C5A2
- #22A4C5
Complementarios
- #52E187
- #22C55E
Triádicos
- #22C55E
- #147739
- #5E22C5
¿Dónde usar shadcn Green en UI de producción?
Notas sobre shadcn Green
El preset verde de shadcn es un verde fresco, ligeramente frío, oklch(0.723 0.192 149.6), pensado para temas de éxito y acentos positivos. Es brillante, así que se aplica la regla habitual: sobre blanco es Below AA (2.28:1, APCA Lc +44.33), no apto para texto pequeño en una página clara, mientras que sobre una superficie casi negra alcanza WCAG 2.2 AAA (9.22:1, APCA Lc -57.8). El complementario #52E187 mantiene un menta tonal, mientras que la tríada llega a un #147739 profundo y un morado #5E22C5. Lo que distingue a este verde es lo mucho que se degrada bajo la lente de accesibilidad: la protanopia y la deuteranopia lo desaturan casi hasta el gris (#696A77 y #5F537D), así que para muchas personas con visión rojo-verde apenas se lee como un color, mucho menos como verde. Si este verde marca éxito, debe ir acompañado de un ícono o etiqueta, y nunca debería ser lo único que lo separe de un estado destructivo rojo.
¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Green?
Otros temas de shadcn
shadcn Primary Blue en OKLCH
oklch(0.623 0.188 259.80)
shadcn Zinc Dark en OKLCH
oklch(0.274 0.005 286.00)
shadcn Slate Accessible en OKLCH
oklch(0.279 0.037 260.00)
shadcn Indigo Custom en OKLCH
oklch(0.585 0.204 277.10)
shadcn Orange en OKLCH
oklch(0.705 0.187 47.60)
shadcn Red en OKLCH
oklch(0.637 0.208 25.30)
shadcn Violet en OKLCH
oklch(0.606 0.219 292.70)
Matices más cercanos entre familias
:root {
--background: 120 7% 97%;
--foreground: 140 6% 10%;
--card: 120 7% 97%;
--card-foreground: 140 6% 10%;
--popover: 120 7% 97%;
--popover-foreground: 140 6% 10%;
--primary: 142 71% 45%;
--primary-foreground: 240 10% 4%;
--secondary: 169 44% 85%;
--secondary-foreground: 170 100% 8%;
--muted: 120 7% 94%;
--muted-foreground: 140 6% 50%;
--accent: 111 51% 85%;
--accent-foreground: 120 100% 8%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 140 5% 88%;
--input: 140 5% 88%;
--ring: 142 71% 45%;
--radius: 0.5rem;
}
.dark {
--background: 150 7% 6%;
--foreground: 120 7% 97%;
--card: 140 6% 10%;
--card-foreground: 120 7% 97%;
--popover: 140 6% 10%;
--popover-foreground: 120 7% 97%;
--primary: 136 59% 58%;
--primary-foreground: 240 10% 4%;
--secondary: 172 100% 14%;
--secondary-foreground: 169 44% 85%;
--muted: 140 7% 18%;
--muted-foreground: 142 6% 64%;
--accent: 120 100% 14%;
--accent-foreground: 111 51% 85%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 140 7% 18%;
--input: 140 7% 18%;
--ring: 136 59% 58%;
--radius: 0.5rem;
}¿Cómo exportas shadcn Green como design tokens?
Exporta un documento de tokens W3C DTCG para la escala de shadcn Green de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.
Frequently asked questions
¿Listo para construir tu sistema de color?
Gratis para siempre, sin tarjeta, Pro cuando necesites más.
Hecho por un diseñador de producto que publica en código.