Colour Systems
Create colour roles, accessible contrast pairs and reusable palette decisions for products, websites and UI components. This page gives you the structure for planning colour systems with practical guidance, browser-based generation and copyable snippets ahead of deeper ElementYard integration.
Colour generator
Generate semantic colour tokens.
Choose brand and status colours, create 50-950 scales and copy CSS variables, Tailwind colour config or JSON design tokens. These tokens can later guide ElementYard component styling when deeper integration is ready.
Interactive generator
Colour System Generator
Choose semantic colours, generate 50-950 scales, preview light and dark UI surfaces, check basic contrast and copy implementation tokens.
Semantic colours
Generated scales
Reusable UI surface
Cards, inputs and buttons inherit semantic roles from the same colour system.
Reusable UI surface
Cards, inputs and buttons inherit semantic roles from the same colour system.
Basic contrast checks
Passes WCAG AA for normal text.
Passes WCAG AA for normal text.
Passes WCAG AA for normal text.
Passes WCAG AA for normal text.
:root {
--color-primary-50: #f2f6fe;
--color-primary-100: #e0e9fc;
--color-primary-200: #c2d3f9;
--color-primary-300: #9bb7f6;
--color-primary-400: #628ff1;
--color-primary-500: #2563eb;
--color-primary-600: #2158d2;
--color-primary-700: #1b49b0;
--color-primary-800: #163a8e;
--color-primary-900: #0f2968;
--color-primary-950: #0a1a46;
--color-accent-50: #f1fbfa;
--color-accent-100: #def5f3;
--color-accent-200: #bdebe6;
--color-accent-300: #93ded6;
--color-accent-400: #56ccbf;
--color-accent-500: #14b8a6;
--color-accent-600: #12a395;
--color-accent-700: #0f867e;
--color-accent-800: #0c6a67;
--color-accent-900: #094a4d;
--color-accent-950: #062d36;
--color-success-50: #f1f9f4;
--color-success-100: #def2e6;
--color-success-200: #bee5cc;
--color-success-300: #94d5ac;
--color-success-400: #57bd7d;
--color-success-500: #16a34a;
--color-success-600: #149044;
--color-success-700: #10773c;
--color-success-800: #0d5e34;
--color-success-900: #0a422a;
--color-success-950: #062922;
--color-warning-50: #fef9f0;
--color-warning-100: #fef1dd;
--color-warning-200: #fce4bb;
--color-warning-300: #fad28f;
--color-warning-400: #f8b94f;
--color-warning-500: #f59e0b;
--color-warning-600: #d88c0c;
--color-warning-700: #b1730e;
--color-warning-800: #8a5b10;
--color-warning-900: #5e4012;
--color-warning-950: #372714;
--color-error-50: #fdf2f2;
--color-error-100: #fae1e1;
--color-error-200: #f5c2c2;
--color-error-300: #ef9b9b;
--color-error-400: #e66363;
--color-error-500: #dc2626;
--color-error-600: #c22224;
--color-error-700: #9f1d22;
--color-error-800: #7c181f;
--color-error-900: #55121d;
--color-error-950: #320d1a;
}export default {
theme: {
extend: {
colors: {
primary: {
50: "#f2f6fe",
100: "#e0e9fc",
200: "#c2d3f9",
300: "#9bb7f6",
400: "#628ff1",
500: "#2563eb",
600: "#2158d2",
700: "#1b49b0",
800: "#163a8e",
900: "#0f2968",
950: "#0a1a46",
},
accent: {
50: "#f1fbfa",
100: "#def5f3",
200: "#bdebe6",
300: "#93ded6",
400: "#56ccbf",
500: "#14b8a6",
600: "#12a395",
700: "#0f867e",
800: "#0c6a67",
900: "#094a4d",
950: "#062d36",
},
success: {
50: "#f1f9f4",
100: "#def2e6",
200: "#bee5cc",
300: "#94d5ac",
400: "#57bd7d",
500: "#16a34a",
600: "#149044",
700: "#10773c",
800: "#0d5e34",
900: "#0a422a",
950: "#062922",
},
warning: {
50: "#fef9f0",
100: "#fef1dd",
200: "#fce4bb",
300: "#fad28f",
400: "#f8b94f",
500: "#f59e0b",
600: "#d88c0c",
700: "#b1730e",
800: "#8a5b10",
900: "#5e4012",
950: "#372714",
},
error: {
50: "#fdf2f2",
100: "#fae1e1",
200: "#f5c2c2",
300: "#ef9b9b",
400: "#e66363",
500: "#dc2626",
600: "#c22224",
700: "#9f1d22",
800: "#7c181f",
900: "#55121d",
950: "#320d1a",
},
},
},
},
};{
"color": {
"primary": {
"50": {
"value": "#f2f6fe",
"type": "color"
},
"100": {
"value": "#e0e9fc",
"type": "color"
},
"200": {
"value": "#c2d3f9",
"type": "color"
},
"300": {
"value": "#9bb7f6",
"type": "color"
},
"400": {
"value": "#628ff1",
"type": "color"
},
"500": {
"value": "#2563eb",
"type": "color"
},
"600": {
"value": "#2158d2",
"type": "color"
},
"700": {
"value": "#1b49b0",
"type": "color"
},
"800": {
"value": "#163a8e",
"type": "color"
},
"900": {
"value": "#0f2968",
"type": "color"
},
"950": {
"value": "#0a1a46",
"type": "color"
}
},
"accent": {
"50": {
"value": "#f1fbfa",
"type": "color"
},
"100": {
"value": "#def5f3",
"type": "color"
},
"200": {
"value": "#bdebe6",
"type": "color"
},
"300": {
"value": "#93ded6",
"type": "color"
},
"400": {
"value": "#56ccbf",
"type": "color"
},
"500": {
"value": "#14b8a6",
"type": "color"
},
"600": {
"value": "#12a395",
"type": "color"
},
"700": {
"value": "#0f867e",
"type": "color"
},
"800": {
"value": "#0c6a67",
"type": "color"
},
"900": {
"value": "#094a4d",
"type": "color"
},
"950": {
"value": "#062d36",
"type": "color"
}
},
"success": {
"50": {
"value": "#f1f9f4",
"type": "color"
},
"100": {
"value": "#def2e6",
"type": "color"
},
"200": {
"value": "#bee5cc",
"type": "color"
},
"300": {
"value": "#94d5ac",
"type": "color"
},
"400": {
"value": "#57bd7d",
"type": "color"
},
"500": {
"value": "#16a34a",
"type": "color"
},
"600": {
"value": "#149044",
"type": "color"
},
"700": {
"value": "#10773c",
"type": "color"
},
"800": {
"value": "#0d5e34",
"type": "color"
},
"900": {
"value": "#0a422a",
"type": "color"
},
"950": {
"value": "#062922",
"type": "color"
}
},
"warning": {
"50": {
"value": "#fef9f0",
"type": "color"
},
"100": {
"value": "#fef1dd",
"type": "color"
},
"200": {
"value": "#fce4bb",
"type": "color"
},
"300": {
"value": "#fad28f",
"type": "color"
},
"400": {
"value": "#f8b94f",
"type": "color"
},
"500": {
"value": "#f59e0b",
"type": "color"
},
"600": {
"value": "#d88c0c",
"type": "color"
},
"700": {
"value": "#b1730e",
"type": "color"
},
"800": {
"value": "#8a5b10",
"type": "color"
},
"900": {
"value": "#5e4012",
"type": "color"
},
"950": {
"value": "#372714",
"type": "color"
}
},
"error": {
"50": {
"value": "#fdf2f2",
"type": "color"
},
"100": {
"value": "#fae1e1",
"type": "color"
},
"200": {
"value": "#f5c2c2",
"type": "color"
},
"300": {
"value": "#ef9b9b",
"type": "color"
},
"400": {
"value": "#e66363",
"type": "color"
},
"500": {
"value": "#dc2626",
"type": "color"
},
"600": {
"value": "#c22224",
"type": "color"
},
"700": {
"value": "#9f1d22",
"type": "color"
},
"800": {
"value": "#7c181f",
"type": "color"
},
"900": {
"value": "#55121d",
"type": "color"
},
"950": {
"value": "#320d1a",
"type": "color"
}
}
}
}Why it matters
Colours shape every component.
Colour systems keep brand, hierarchy, state and accessibility decisions consistent across pages and components.
Best practices
Use these rules before turning colour systems into tokens or implementation details.
Workflow
Keep this practical and repeatable before adding automation.
Related resources
Use tools, components, cheatsheets and guides to turn this foundation into real web work.
ElementYard CTA
Bring colours into visual components.
Use ElementYard when you want to explore how system decisions should feel inside real component layouts and page sections.
Colours FAQ
Colour Systems help teams document practical design decisions for create colour roles, accessible contrast pairs and reusable palette decisions for products, websites and ui components.
Yes. This page includes a browser-based generator for practical starter values and copyable implementation snippets. It is still not pretending to replace a full design-system review.
The system defines the decisions, while ElementYard can eventually apply those decisions to visual component and page-section workflows.