kaimdt Color System
Generate a complete 126-color design system from one base color. 21 light + 21 dark shades each for Primary, Secondary, and Error. Copy-paste ready for Tailwind CSS, Plain CSS, SCSS, and more.
Base Color
CSS Variable Prefix
Used in CSS/SCSS/Tailwind v4 exports
--kcs-primary-60
Families Overview
Primary
Secondary
Error
Quick Presets
Live Preview
See your colors applied to a full page layout
Build Amazing Products
Experience the power of a well-designed color palette. This preview demonstrates how your custom color system creates visual hierarchy.
Fast Performance
Lightning-quick load times for optimal user experience across all devices.
Responsive Design
Lightning-quick load times for optimal user experience across all devices.
Customizable
Lightning-quick load times for optimal user experience across all devices.
Ready to Get Started?
Join thousands of satisfied customers today
:root { --kcs-primary-0: #003166; --kcs-primary-10: #003e80; --kcs-primary-20: #004a99; --kcs-primary-30: #0056b3; --kcs-primary-40: #0062cc; --kcs-primary-50: #006fe6; --kcs-primary-60: #007bff; --kcs-primary-70: #1a88ff; --kcs-primary-80: #3395ff; --kcs-primary-90: #4da3ff; --kcs-primary-100: #66b0ff; --kcs-primary-110: #80bdff; --kcs-primary-120: #99caff; --kcs-primary-130: #b3d7ff; --kcs-primary-140: #cce5ff; --kcs-primary-150: #dbedff; --kcs-primary-160: #e0efff; --kcs-primary-170: #e5f2ff; --kcs-primary-180: #f0f7ff; --kcs-primary-190: #f5faff; --kcs-primary-200: #fafcff; --kcs-primary-dark-0: #004a99; --kcs-primary-dark-50: #00458f; --kcs-primary-dark-100: #004085; --kcs-primary-dark-150: #003e80; --kcs-primary-dark-200: #003b7a; --kcs-primary-dark-250: #003975; --kcs-primary-dark-300: #003670; --kcs-primary-dark-350: #00346b; --kcs-primary-dark-400: #003166; --kcs-primary-dark-450: #002c5c; --kcs-primary-dark-500: #002752; --kcs-primary-dark-550: #002247; --kcs-primary-dark-600: #002042; --kcs-primary-dark-650: #001e3d; --kcs-primary-dark-700: #001933; --kcs-primary-dark-750: #001429; --kcs-primary-dark-800: #000f1f; --kcs-primary-dark-850: #000c1a; --kcs-primary-dark-900: #000a14; --kcs-primary-dark-950: #00070f; --kcs-primary-dark-1000: #00050a; --kcs-secondary-0: #223244; --kcs-secondary-10: #2b3f55; --kcs-secondary-20: #334c66; --kcs-secondary-30: #3c5877; --kcs-secondary-40: #446588; --kcs-secondary-50: #4d7199; --kcs-secondary-60: #557eaa; --kcs-secondary-70: #668bb2; --kcs-secondary-80: #7798bb; --kcs-secondary-90: #88a5c3; --kcs-secondary-100: #99b2cc; --kcs-secondary-110: #aabed4; --kcs-secondary-120: #bbcbdd; --kcs-secondary-130: #ccd8e5; --kcs-secondary-140: #dde5ee; --kcs-secondary-150: #e7edf3; --kcs-secondary-160: #ebf0f5; --kcs-secondary-170: #eef2f6; --kcs-secondary-180: #f5f7fa; --kcs-secondary-190: #f8fafc; --kcs-secondary-200: #fcfcfd; --kcs-secondary-dark-0: #334c66; --kcs-secondary-dark-50: #30465f; --kcs-secondary-dark-100: #2c4158; --kcs-secondary-dark-150: #2b3f55; --kcs-secondary-dark-200: #293c51; --kcs-secondary-dark-250: #273a4e; --kcs-secondary-dark-300: #25374b; --kcs-secondary-dark-350: #243547; --kcs-secondary-dark-400: #223244; --kcs-secondary-dark-450: #1f2d3d; --kcs-secondary-dark-500: #1b2836; --kcs-secondary-dark-550: #182330; --kcs-secondary-dark-600: #16212c; --kcs-secondary-dark-650: #141e29; --kcs-secondary-dark-700: #111922; --kcs-secondary-dark-750: #0e141b; --kcs-secondary-dark-800: #0a0f14; --kcs-secondary-dark-850: #090d11; --kcs-secondary-dark-900: #070a0e; --kcs-secondary-dark-950: #05080a; --kcs-secondary-dark-1000: #030507; --kcs-error-0: #5e0810; --kcs-error-10: #760a15; --kcs-error-20: #8d0c19; --kcs-error-30: #a50e1d; --kcs-error-40: #bc1021; --kcs-error-50: #d41225; --kcs-error-60: #eb1429; --kcs-error-70: #ed2b3f; --kcs-error-80: #ef4354; --kcs-error-90: #f15a69; --kcs-error-100: #f3727f; --kcs-error-110: #f58994; --kcs-error-120: #f7a1a9; --kcs-error-130: #f9b8bf; --kcs-error-140: #fbd0d4; --kcs-error-150: #fcdee1; --kcs-error-160: #fde3e5; --kcs-error-170: #fde7ea; --kcs-error-180: #fef1f2; --kcs-error-190: #fef6f6; --kcs-error-200: #fffafb; --kcs-error-dark-0: #8d0c19; --kcs-error-dark-50: #840b17; --kcs-error-dark-100: #7a0a15; --kcs-error-dark-150: #760a15; --kcs-error-dark-200: #710914; --kcs-error-dark-250: #6c0913; --kcs-error-dark-300: #680912; --kcs-error-dark-350: #630811; --kcs-error-dark-400: #5e0810; --kcs-error-dark-450: #55070f; --kcs-error-dark-500: #4b060d; --kcs-error-dark-550: #42050c; --kcs-error-dark-600: #3d050b; --kcs-error-dark-650: #39050a; --kcs-error-dark-700: #2f0408; --kcs-error-dark-750: #260307; --kcs-error-dark-800: #1c0205; --kcs-error-dark-850: #180204; --kcs-error-dark-900: #130203; --kcs-error-dark-950: #0e0102; --kcs-error-dark-1000: #090102; /* Semantic */ --kcs-color: #ffffff; --kcs-background: #fafcff; --kcs-button-bg: #66b0ff; --kcs-button-color: #ffffff; --kcs-navbar-bg: #e5f2ff; --kcs-link-color: #0056b3; }
kaimdt Color System (kcs)
This generator creates 126 comprehensive colors from a single base color — 21 light shades (0–200) and 21 dark shades (0–1000) for each of the three families: Primary (your brand), Secondary (derived at 75% lightness), and Error (85% red + 15% primary mix). CSS variable names use the --kcs-* prefix by default (--kcs-*).
Frequently Asked Questions
What is the kaimdt Color System?
The kaimdt Color System (kcs) is a comprehensive 126-color palette generator. From a single base color, it calculates 21 light shades (0-200) and 21 dark shades (0-1000) for Primary, Secondary, and Error families. This gives you consistent, mathematically-derived colors for light mode, dark mode, and error states.
How does the Secondary color get derived?
The Secondary palette is generated by taking the Primary hue and recalculating it at 75% lightness. This ensures the secondary colors harmonize naturally with the primary without requiring manual input.
How does the Error color get derived?
The Error color is a blend of 85% pure red (#FF0000) and 15% of your primary color. This ensures the error state is immediately recognizable as an alert/danger color while maintaining a tonal connection to your brand palette.
What export formats are supported?
You can copy-paste code in five formats: CSS custom properties (vanilla CSS), SCSS variable maps, Tailwind CSS v3 config (`module.exports`), Tailwind CSS v4 `@theme` block, and raw JSON. Each format includes all 126 colors organized by family and mode.
What do the shade numbers mean?
Light shades range from 0 (darkest, ~20% lightness) to 200 (lightest, ~99% lightness) in steps of 10. Dark shades range from 0 (lightest dark, ~30% lightness) to 1000 (darkest, ~2% lightness) in steps of 50. Shade 60 is typically the base/accent color in the light palette.
Can I customize the CSS variable prefix?
Yes. By default the prefix is 'kcs' (--kcs-*), but you can change it to anything — e.g. 'brand', 'app', 'lo', your project name. The prefix is applied to CSS, SCSS, and Tailwind v4 exports.