Gerador de cor aleatória online
Clique em gerar cor aleatória para gerar uma cor aleatória em HEX, RGB e HSL (três formatos CSS padrão) assim como as respetivas variações mais claro/escuro e matiz (Hue).
Cor aleatória:
HEX
RGB
HSL
Visualização:
Texto preto
Sombra
Texto branco
Sombra
Mais claro / Mais escuro:
Obs: pode clicar em alguma destas cores para testar suas variações.
| Clicar ⇣ | % | HEX | RGB | HSL |
|---|---|---|---|---|
| 100% | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| 95% | #fbedef | rgb(251, 237, 239) | hsl(351, 64%, 96%) | |
| 90% | #f7dbe0 | rgb(247, 219, 224) | hsl(349, 64%, 91%) | |
| 85% | #f4c8d0 | rgb(244, 200, 208) | hsl(349, 67%, 87%) | |
| 80% | #f0b6c0 | rgb(240, 182, 192) | hsl(350, 66%, 83%) | |
| 75% | #eca4b1 | rgb(236, 164, 177) | hsl(349, 65%, 78%) | |
| 70% | #e892a1 | rgb(232, 146, 161) | hsl(350, 65%, 74%) | |
| 65% | #e48091 | rgb(228, 128, 145) | hsl(350, 65%, 70%) | |
| 60% | #e16d81 | rgb(225, 109, 129) | hsl(350, 66%, 65%) | |
| 55% | #dd5b72 | rgb(221, 91, 114) | hsl(349, 66%, 61%) | |
| 50% | #d94962 | rgb(217, 73, 98) | hsl(350, 65%, 57%) | |
| 45% | #c34258 | rgb(195, 66, 88) | hsl(350, 52%, 51%) | |
| 40% | #ae3a4e | rgb(174, 58, 78) | hsl(350, 50%, 45%) | |
| 35% | #983345 | rgb(152, 51, 69) | hsl(349, 50%, 40%) | |
| 30% | #822c3b | rgb(130, 44, 59) | hsl(350, 49%, 34%) | |
| 25% | #6d2531 | rgb(109, 37, 49) | hsl(350, 49%, 29%) | |
| 20% | #571d27 | rgb(87, 29, 39) | hsl(350, 50%, 23%) | |
| 15% | #41161d | rgb(65, 22, 29) | hsl(350, 49%, 17%) | |
| 10% | #2b0f14 | rgb(43, 15, 20) | hsl(349, 48%, 11%) | |
| 5% | #16070a | rgb(22, 7, 10) | hsl(348, 52%, 6%) | |
| 0% | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Matiz (Hue):
Obs: pode clicar em alguma destas cores para testar suas variações.
| Clicar ⇣ | % | HEX | RGB | HSL |
|---|---|---|---|---|
| 0 | #d94949 | rgb(217, 73, 73) | hsl(0, 65%, 57%) | |
| 15 | #d96d49 | rgb(217, 109, 73) | hsl(15, 65%, 57%) | |
| 30 | #d99149 | rgb(217, 145, 73) | hsl(30, 65%, 57%) | |
| 45 | #d9b549 | rgb(217, 181, 73) | hsl(45, 65%, 57%) | |
| 60 | #d9d949 | rgb(217, 217, 73) | hsl(60, 65%, 57%) | |
| 75 | #b5d949 | rgb(181, 217, 73) | hsl(75, 65%, 57%) | |
| 90 | #91d949 | rgb(145, 217, 73) | hsl(90, 65%, 57%) | |
| 105 | #6dd949 | rgb(109, 217, 73) | hsl(105, 65%, 57%) | |
| 120 | #49d949 | rgb(73, 217, 73) | hsl(120, 65%, 57%) | |
| 135 | #49d96d | rgb(73, 217, 109) | hsl(135, 65%, 57%) | |
| 150 | #49d991 | rgb(73, 217, 145) | hsl(150, 65%, 57%) | |
| 165 | #49d9b5 | rgb(73, 217, 181) | hsl(165, 65%, 57%) | |
| 180 | #49d9d9 | rgb(73, 217, 217) | hsl(180, 65%, 57%) | |
| 195 | #49b5d9 | rgb(73, 181, 217) | hsl(195, 65%, 57%) | |
| 210 | #4991d9 | rgb(73, 145, 217) | hsl(210, 65%, 57%) | |
| 225 | #496dd9 | rgb(73, 109, 217) | hsl(225, 65%, 57%) | |
| 240 | #4949d9 | rgb(73, 73, 217) | hsl(240, 65%, 57%) | |
| 255 | #6d49d9 | rgb(109, 73, 217) | hsl(255, 65%, 57%) | |
| 270 | #9149d9 | rgb(145, 73, 217) | hsl(270, 65%, 57%) | |
| 285 | #b549d9 | rgb(181, 73, 217) | hsl(285, 65%, 57%) | |
| 300 | #d949d9 | rgb(217, 73, 217) | hsl(300, 65%, 57%) | |
| 315 | #d949b5 | rgb(217, 73, 181) | hsl(315, 65%, 57%) | |
| 330 | #d94991 | rgb(217, 73, 145) | hsl(330, 65%, 57%) | |
| 345 | #d9496d | rgb(217, 73, 109) | hsl(345, 65%, 57%) | |
| 360 | #d94949 | rgb(217, 73, 73) | hsl(0, 65%, 57%) |
Ver também: