Convertir Hex a RGB
Pega un código hex y lee al momento los valores de rojo, verde y azul, listos para usar en CSS o en tu herramienta de diseño.
Color semilla
Vista previa en vivo
ApolloResumen
Ingresos recurrentes mensuales
$284,592
+12.4%Activo
02 · Tokens
Formatos listos para producción
Cada formato, cada framework. Un toque al portapapeles.
HEX
#2F56E0
RGB
rgb(47, 86, 224)
HSL
hsl(227, 74%, 53%)
OKLCHModern
oklch(51.6% 0.214 266.4)
CSS Variable
--color-apollo-dashboard: #2F56E0;
--color-apollo-dashboard-hover: #2142CB;
--color-apollo-dashboard-active: #152CB7;
--color-apollo-dashboard-focus: rgba(47, 86, 224, 0.2);
--color-apollo-dashboard-rgb: 47 86 224;
--color-apollo-dashboard-oklch: 51.6% 0.214 266.4;Tailwind config
// tailwind.config.ts
colors: {
apollo-dashboard: {
DEFAULT: "#2F56E0",
hover: "#2142CB",
active: "#152CB7",
focus: "rgb(47 86 224 / 0.2)",
rgb: "47 86 224",
},
},SwiftUI
extension Color {
static let apolloDashboard = Color(
.sRGB,
red: 0.184,
green: 0.337,
blue: 0.878,
opacity: 1
)
}W3C Design Tokens
{
"apollo-dashboard": {
"$type": "color",
"$value": "#2F56E0",
"$description": "Apollo Dashboard / brand"
}
}03 · Accesibilidad
Contraste y visión
WCAG 2.1 y APCA, con simulación de daltonismo en tiempo real sobre la vista previa.
Aa
El veloz zorro marrón salta sobre el perro perezoso
sobre blanco
WCAG 2.15.95:1
AAAAAAA Large
APCA Lc+79.0
CuerpoTexto de cuerpo 16px+
Aa
El veloz zorro marrón salta sobre el perro perezoso
sobre tinta (#101010)
WCAG 2.13.20:1
AAAAAAA Large
APCA Lc-22.3
FallaContraste insuficiente
Simulador de daltonismoAfecta la vista previa de arriba
04 · Sistema
Paleta semántica
Derivada automáticamente de tu color semilla — croma ajustado, contraste sobre el fondo verificado matemáticamente.
PrincipalMarca, CTA, anillos de foco
#2F56E0oklch(51.6% 0.214 266.4)
5.89:1
AA
SecundarioAcentos complementarios
#6A510Boklch(45.0% 0.087 86.4)
7.44:1
AAA
ÉxitoConfirmaciones, estados positivos
#298646oklch(55.0% 0.130 150.0)
4.53:1
AA
AdvertenciaPrecaución, revisión pendiente
#C4881Foklch(67.0% 0.132 75.0)
3.02:1
Bajo AA
PeligroDestructivo, errores
#C53637oklch(55.0% 0.180 25.0)
5.26:1
AA
Proyecto
8 colores
Marca#2F56E0Semilla
Acento#6A510B
Éxito#298646
Advertencia#C4881F
Peligro#C53637
Tinta#101010
Lienzo#FEFEFC
Sutil#F6F6EF
Consejo: importa el JSON a Figma con el plugin Tokens Studio para conectar con Variables de Figma.