Registrarse Registrarse
ROBOT DISTOPIA

ROBOT DISTOPIA

Paleta de 10 colores · Colores neutros · Tonos mixtos · Armonía complementaria

Volver a la biblioteca

ROBOT DISTOPIA

Paleta de 10 colores · Colores neutros · Tonos mixtos · Armonía complementaria

Editar
Colores vibrantes 10 colores Colores neutros Tonos mixtos Armonía complementaria tech dark red blue
Me gusta 25
Colores 10

Variables CSS

:root {
  --c-vibrant-1: #050513;
  --c-vibrant-2: #20154B;
  --c-vibrant-3: #5D0A3F;
  --c-vibrant-4: #AA134C;
  --c-vibrant-5: #6590FF;
  --c-vibrant-6: #ADDCFF;
  --c-vibrant-7: #7F4B15;
  --c-vibrant-8: #BC7F3B;
  --c-vibrant-9: #4B6F5B;
  --c-vibrant-10: #5B7A5B;
}

Sobre esta paleta

Esta paleta de 10 colores vibrantes va de Droplet (#ADDCFF), su tono más claro, a Obsidian Shard (#050513), el más oscuro. Combina Obsidian Shard, Tetsu-Kon Blue, Mulberry Wood, Cerise, Deep Denim, Droplet, Medium Brown, Cut the Mustard, Kale Green y Green Mantle en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 45. De ellas, 9 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #050513 sobre #ADDCFF, con 13,93:1.

Una paleta versátil para páginas de marketing, bloques hero de producto, ilustraciones y estados de acento de la interfaz.

Desglose de colores

Obsidian Shard #050513
RGB
rgb(5, 5, 19)
HSL
hsl(240, 58%, 5%)
Luminancia
0,002
Tetsu-Kon Blue #20154B
RGB
rgb(32, 21, 75)
HSL
hsl(252, 56%, 19%)
Luminancia
0,014
Mulberry Wood #5D0A3F
RGB
rgb(93, 10, 63)
HSL
hsl(322, 81%, 20%)
Luminancia
0,029
Cerise #AA134C
RGB
rgb(170, 19, 76)
HSL
hsl(337, 80%, 37%)
Luminancia
0,095
Deep Denim #6590FF
RGB
rgb(101, 144, 255)
HSL
hsl(223, 100%, 70%)
Luminancia
0,299
Droplet #ADDCFF
RGB
rgb(173, 220, 255)
HSL
hsl(206, 100%, 84%)
Luminancia
0,673
Medium Brown #7F4B15
RGB
rgb(127, 75, 21)
HSL
hsl(31, 72%, 29%)
Luminancia
0,096
Cut the Mustard #BC7F3B
RGB
rgb(188, 127, 59)
HSL
hsl(32, 52%, 48%)
Luminancia
0,262
Kale Green #4B6F5B
RGB
rgb(75, 111, 91)
HSL
hsl(147, 19%, 36%)
Luminancia
0,136
Green Mantle #5B7A5B
RGB
rgb(91, 122, 91)
HSL
hsl(120, 15%, 42%)
Luminancia
0,169

Contraste y accesibilidad

Combinaciones de colores en la paleta: 45. De ellas, 9 cumplen el umbral de contraste WCAG AA (4,5:1) para texto principal.

Aa #050513 sobre #ADDCFF 13,93:1 AAA
Aa #20154B sobre #ADDCFF 11,38:1 AAA
Aa #5D0A3F sobre #ADDCFF 9,15:1 AAA
Aa #050513 sobre #6590FF 6,73:1 AA
Aa #050513 sobre #BC7F3B 6,01:1 AA
Aa #20154B sobre #6590FF 5,50:1 AA
Aa #AA134C sobre #ADDCFF 4,97:1 AA
Aa #ADDCFF sobre #7F4B15 4,95:1 AA
Aa #20154B sobre #BC7F3B 4,91:1 AA
Aa #5D0A3F sobre #6590FF 4,42:1 AA, texto grande
Aa #050513 sobre #5B7A5B 4,22:1 AA, texto grande
Aa #5D0A3F sobre #BC7F3B 3,95:1 AA, texto grande
Aa #ADDCFF sobre #4B6F5B 3,88:1 AA, texto grande
Aa #050513 sobre #4B6F5B 3,59:1 AA, texto grande
Aa #20154B sobre #5B7A5B 3,45:1 AA, texto grande
Aa #ADDCFF sobre #5B7A5B 3,30:1 AA, texto grande
Aa #20154B sobre #4B6F5B 2,93:1 No aprobado
Aa #050513 sobre #7F4B15 2,81:1 No aprobado
Aa #050513 sobre #AA134C 2,80:1 No aprobado
Aa #5D0A3F sobre #5B7A5B 2,77:1 No aprobado
Aa #AA134C sobre #6590FF 2,40:1 No aprobado
Aa #6590FF sobre #7F4B15 2,39:1 No aprobado
Aa #5D0A3F sobre #4B6F5B 2,36:1 No aprobado
Aa #ADDCFF sobre #BC7F3B 2,32:1 No aprobado
Aa #20154B sobre #7F4B15 2,30:1 No aprobado
Aa #20154B sobre #AA134C 2,29:1 No aprobado
Aa #AA134C sobre #BC7F3B 2,15:1 No aprobado
Aa #7F4B15 sobre #BC7F3B 2,14:1 No aprobado
Aa #6590FF sobre #ADDCFF 2,07:1 No aprobado
Aa #6590FF sobre #4B6F5B 1,88:1 No aprobado
Aa #5D0A3F sobre #7F4B15 1,85:1 No aprobado
Aa #5D0A3F sobre #AA134C 1,84:1 No aprobado
Aa #BC7F3B sobre #4B6F5B 1,67:1 No aprobado
Aa #6590FF sobre #5B7A5B 1,60:1 No aprobado
Aa #050513 sobre #5D0A3F 1,52:1 No aprobado
Aa #AA134C sobre #5B7A5B 1,51:1 No aprobado
Aa #7F4B15 sobre #5B7A5B 1,50:1 No aprobado
Aa #BC7F3B sobre #5B7A5B 1,42:1 No aprobado
Aa #AA134C sobre #4B6F5B 1,28:1 No aprobado
Aa #7F4B15 sobre #4B6F5B 1,28:1 No aprobado
Aa #20154B sobre #5D0A3F 1,24:1 No aprobado
Aa #050513 sobre #20154B 1,22:1 No aprobado
Aa #4B6F5B sobre #5B7A5B 1,18:1 No aprobado
Aa #6590FF sobre #BC7F3B 1,12:1 No aprobado
Aa #AA134C sobre #7F4B15 1,00:1 No aprobado

Paletas similares

#EDF1D6 #9DC08B #609966 #40513B
4 colores
#F5F7F8 #F4CE14 #495E57 #45474B
4 colores
#222831 #393E46 #FFD369 #EEEEEE
4 colores
#000000 #52057B #892CDC #BC6FF1
4 colores
#213555 #3E5879 #D8C4B6 #F5EFE7
4 colores
#F5EFE7 #D8C4B6 #4F709C #213555
4 colores
#191A19 #1E5128 #4E9F3D #D8E9A8
4 colores
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 colores