Digging things up…
Digging things up…
Generate semantic design token names from hex colours — primary, secondary, success, warning, error.
Generated tokens
--color-teal-dark--color-red-light--color-orange-light--color-blue-darker--color-red-lightest:root {
--color-teal-dark: #00B4A6;
--color-red-light: #FF6B6B;
--color-orange-light: #FFD166;
--color-blue-darker: #1a2a3a;
--color-red-lightest: #f0f0f0;
}Colour & Design Tools
Pick, convert, mix and test colours across HEX, RGB, HSL and OKLCH, with WCAG contrast checks and ready-made palettes for your next design.
Related colour tools
Convert colours between HEX, RGB, HSL, HSV and CMYK with a visual colour picker.
Use tool →🎨Generate complementary, analogous, triadic and monochromatic palettes from any base colour.
Use tool →🖼️Drag and drop an image to instantly get its Base64 data URL — nothing is uploaded anywhere.
Use tool →⬜Calculate ratios from dimensions, apply presets like 16:9 or 4:3, and scale to any size.
Use tool →Explore more from Dino Media: All Free Tools · Our Services · Digital Glossary · Our Work
See Our Work
We design and build pixel-perfect, high-performing websites for ambitious UK businesses. Take a look at what we have created.