Web & Marketing Kit
Web & Marketing
Color Palette
Build palettes from a base hex.
Runs locally in your browser. No upload.
Paste input, choose an action, then copy or download the result.
Palette
Tint 80
#D6E0EB
Tint 40
#85A3C2
Base
#336699
Shade 35
#214263
Shade 60
#14293D
CSS tokens
:root {
--boringkit-tint-80: #D6E0EB;
--boringkit-tint-40: #85A3C2;
--boringkit-base: #336699;
--boringkit-shade-35: #214263;
--boringkit-shade-60: #14293D;
}Design token JSON
{
"tokens": {
"tint-80": {
"value": "#D6E0EB",
"type": "color",
"contrast": {
"onWhite": 1.34,
"onBlack": 15.72,
"bestText": "#000000"
}
},
"tint-40": {
"value": "#85A3C2",
"type": "color",
"contrast": {
"onWhite": 2.62,
"onBlack": 8.02,
"bestText": "#000000"
}
},
"base": {
"value": "#336699",
"type": "color",
"contrast": {
"onWhite": 6,
"onBlack": 3.5,
"bestText": "#FFFFFF"
}
},
"shade-35": {
"value": "#214263",
"type": "color",
"contrast": {
"onWhite": 10.37,
"onBlack": 2.02,
"bestText": "#FFFFFF"
}
},
"shade-60": {
"value": "#14293D",
"type": "color",
"contrast": {
"onWhite": 14.85,
"onBlack": 1.41,
"bestText": "#FFFFFF"
}
}
}
}Contrast report
- Colors
- 5 items