Toolo

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.