Registrarse Registrarse
Watermelon 21

Watermelon 21

Paleta de 12 colores · Colores cálidos · Tonos mixtos · Armonía triádica

Volver a la biblioteca

Watermelon 21

Paleta de 12 colores · Colores cálidos · Tonos mixtos · Armonía triádica

Editar
Colores vibrantes 12 colores Colores cálidos Tonos mixtos Armonía triádica cute happy summer fruit
Me gusta 10
Colores 12

Variables CSS

:root {
  --c-vibrant-1: #EE0E66;
  --c-vibrant-2: #F25290;
  --c-vibrant-3: #FA9ABF;
  --c-vibrant-4: #FCE7F0;
  --c-vibrant-5: #F3DAA4;
  --c-vibrant-6: #A7B363;
  --c-vibrant-7: #808B2D;
  --c-vibrant-8: #397E09;
  --c-vibrant-9: #3F854F;
  --c-vibrant-10: #E9FAFE;
  --c-vibrant-11: #C4F9FD;
  --c-vibrant-12: #97C8CF;
}

Sobre esta paleta

Esta paleta de 12 colores vibrantes va de Placebo Sky (#E9FAFE), su tono más claro, a Green People (#397E09), el más oscuro. Combina Borderline Pink, Pansy, Pastel Magenta, Cherubic, Double Cream, Cornstalk, Absinthe Dreams, Green People, Imperial Green, Placebo Sky, Thin Air y Adriatic Haze en un solo conjunto que puedes llevar directamente a una interfaz. Combinaciones de colores en la paleta: 66. De ellas, 1 cumple el umbral de contraste WCAG AA (4,5:1) para texto principal; la de mayor contraste es #397E09 sobre #E9FAFE, con 4,7: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

Borderline Pink #EE0E66
RGB
rgb(238, 14, 102)
HSL
hsl(336, 89%, 49%)
Luminancia
0,195
Pansy #F25290
RGB
rgb(242, 82, 144)
HSL
hsl(337, 86%, 64%)
Luminancia
0,269
Pastel Magenta #FA9ABF
RGB
rgb(250, 154, 191)
HSL
hsl(337, 91%, 79%)
Luminancia
0,472
Cherubic #FCE7F0
RGB
rgb(252, 231, 240)
HSL
hsl(334, 78%, 95%)
Luminancia
0,841
Double Cream #F3DAA4
RGB
rgb(243, 218, 164)
HSL
hsl(41, 77%, 80%)
Luminancia
0,719
Cornstalk #A7B363
RGB
rgb(167, 179, 99)
HSL
hsl(69, 34%, 55%)
Luminancia
0,414
Absinthe Dreams #808B2D
RGB
rgb(128, 139, 45)
HSL
hsl(67, 51%, 36%)
Luminancia
0,232
Green People #397E09
RGB
rgb(57, 126, 9)
HSL
hsl(95, 87%, 26%)
Luminancia
0,158
Imperial Green #3F854F
RGB
rgb(63, 133, 79)
HSL
hsl(134, 36%, 38%)
Luminancia
0,184
Placebo Sky #E9FAFE
RGB
rgb(233, 250, 254)
HSL
hsl(191, 91%, 95%)
Luminancia
0,929
Thin Air #C4F9FD
RGB
rgb(196, 249, 253)
HSL
hsl(184, 93%, 88%)
Luminancia
0,866
Adriatic Haze #97C8CF
RGB
rgb(151, 200, 207)
HSL
hsl(188, 37%, 70%)
Luminancia
0,524

Contraste y accesibilidad

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

Aa #397E09 sobre #E9FAFE 4,70:1 AA
Aa #397E09 sobre #C4F9FD 4,40:1 AA, texto grande
Aa #FCE7F0 sobre #397E09 4,28:1 AA, texto grande
Aa #3F854F sobre #E9FAFE 4,18:1 AA, texto grande
Aa #EE0E66 sobre #E9FAFE 4,00:1 AA, texto grande
Aa #3F854F sobre #C4F9FD 3,91:1 AA, texto grande
Aa #FCE7F0 sobre #3F854F 3,81:1 AA, texto grande
Aa #EE0E66 sobre #C4F9FD 3,75:1 AA, texto grande
Aa #F3DAA4 sobre #397E09 3,69:1 AA, texto grande
Aa #EE0E66 sobre #FCE7F0 3,65:1 AA, texto grande
Aa #808B2D sobre #E9FAFE 3,46:1 AA, texto grande
Aa #F3DAA4 sobre #3F854F 3,29:1 AA, texto grande
Aa #808B2D sobre #C4F9FD 3,24:1 AA, texto grande
Aa #FCE7F0 sobre #808B2D 3,16:1 AA, texto grande
Aa #EE0E66 sobre #F3DAA4 3,14:1 AA, texto grande
Aa #F25290 sobre #E9FAFE 3,06:1 AA, texto grande
Aa #F25290 sobre #C4F9FD 2,87:1 No aprobado
Aa #F25290 sobre #FCE7F0 2,79:1 No aprobado
Aa #397E09 sobre #97C8CF 2,76:1 No aprobado
Aa #F3DAA4 sobre #808B2D 2,72:1 No aprobado
Aa #FA9ABF sobre #397E09 2,51:1 No aprobado
Aa #3F854F sobre #97C8CF 2,45:1 No aprobado
Aa #F25290 sobre #F3DAA4 2,41:1 No aprobado
Aa #EE0E66 sobre #97C8CF 2,35:1 No aprobado
Aa #FA9ABF sobre #3F854F 2,23:1 No aprobado
Aa #A7B363 sobre #397E09 2,23:1 No aprobado
Aa #EE0E66 sobre #FA9ABF 2,13:1 No aprobado
Aa #A7B363 sobre #E9FAFE 2,11:1 No aprobado
Aa #808B2D sobre #97C8CF 2,03:1 No aprobado
Aa #A7B363 sobre #3F854F 1,98:1 No aprobado
Aa #A7B363 sobre #C4F9FD 1,98:1 No aprobado
Aa #FCE7F0 sobre #A7B363 1,92:1 No aprobado
Aa #EE0E66 sobre #A7B363 1,90:1 No aprobado
Aa #FA9ABF sobre #E9FAFE 1,87:1 No aprobado
Aa #FA9ABF sobre #808B2D 1,85:1 No aprobado
Aa #F25290 sobre #97C8CF 1,80:1 No aprobado
Aa #FA9ABF sobre #C4F9FD 1,75:1 No aprobado
Aa #FA9ABF sobre #FCE7F0 1,71:1 No aprobado
Aa #E9FAFE sobre #97C8CF 1,70:1 No aprobado
Aa #F3DAA4 sobre #A7B363 1,66:1 No aprobado
Aa #A7B363 sobre #808B2D 1,64:1 No aprobado
Aa #F25290 sobre #FA9ABF 1,63:1 No aprobado
Aa #C4F9FD sobre #97C8CF 1,60:1 No aprobado
Aa #FCE7F0 sobre #97C8CF 1,55:1 No aprobado
Aa #F25290 sobre #397E09 1,53:1 No aprobado
Aa #FA9ABF sobre #F3DAA4 1,47:1 No aprobado
Aa #F25290 sobre #A7B363 1,45:1 No aprobado
Aa #F25290 sobre #3F854F 1,36:1 No aprobado
Aa #808B2D sobre #397E09 1,36:1 No aprobado
Aa #F3DAA4 sobre #97C8CF 1,34:1 No aprobado
Aa #EE0E66 sobre #F25290 1,31:1 No aprobado
Aa #F3DAA4 sobre #E9FAFE 1,27:1 No aprobado
Aa #A7B363 sobre #97C8CF 1,24:1 No aprobado
Aa #808B2D sobre #3F854F 1,21:1 No aprobado
Aa #F3DAA4 sobre #C4F9FD 1,19:1 No aprobado
Aa #EE0E66 sobre #397E09 1,17:1 No aprobado
Aa #EE0E66 sobre #808B2D 1,16:1 No aprobado
Aa #FCE7F0 sobre #F3DAA4 1,16:1 No aprobado
Aa #F25290 sobre #808B2D 1,13:1 No aprobado
Aa #FA9ABF sobre #A7B363 1,13:1 No aprobado
Aa #397E09 sobre #3F854F 1,12:1 No aprobado
Aa #FA9ABF sobre #97C8CF 1,10:1 No aprobado
Aa #FCE7F0 sobre #E9FAFE 1,10:1 No aprobado
Aa #E9FAFE sobre #C4F9FD 1,07:1 No aprobado
Aa #EE0E66 sobre #3F854F 1,05:1 No aprobado
Aa #FCE7F0 sobre #C4F9FD 1,03:1 No aprobado

Paletas similares

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colores
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colores
#FFF8EA #9E7676 #815B5B #594545
4 colores
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colores
#F67280 #C06C84 #6C5B7B #355C7D
4 colores
#2B2E4A #E84545 #903749 #53354A
4 colores
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colores
#A9907E #F3DEBA #ABC4AA #675D50
4 colores