Build Color Palettes for Design Systems
Convert brand colours across all formats and generate consistent lightness scales for a full design system.
Accepts: HEX (#fff or #ffffff), RGB (255, 255, 255), or HSL (360, 100%, 50%)
Lightness scale
Click any swatch to switch to that shade
Design Systems tips
The lightness scale at the bottom generates shades from 10% to 90% — great for building a token-based palette like Tailwind's 50–900 scale.
Start with your brand colour, convert to HSL, then create a scale by keeping H and S fixed while varying L from 10% to 90%.
Export all shades as HEX for Figma, as RGB for code, and as HSL for your CSS custom properties system.
Ensure sufficient contrast between text and background colours. Use the WCAG 4.5:1 contrast ratio guideline for body text readability.
كيف يعمل
لماذا تستخدم أداتنا؟
Also check out…
Convert Colors for Web Design
Get HEX, RGB, and HSL values for any colour — read
Convert Colors for Print (CMYK)
Convert screen colours (HEX/RGB) to CMYK values fo
Check Colour Contrast for Accessibility
Convert colours to get RGB values for use in contr
Convert Colors for Figma
Get the exact HEX and RGB values to paste into Fig