KColor offers a range of generation modes to help you quickly create the type of palette that best fits your design needs—from automatic color suggestions to utility-first frameworks like Tailwind and Bootstrap.
Auto
The default mode that intelligently picks colors based on random base colors and picks popular color palettes from the KColor’s palettes collection. It aims to provide a balanced and visually appealing palette without requiring fine-tuning.
Tints
Generates lighter variations of a base color. Ideal for creating soft, pastel-themed palettes or UI components like hover and disabled states.
Shades
Produces darker variations of a base color. Useful for adding depth, shadows, and dark UI themes while maintaining brand consistency.
Monochrome
Creates a palette of colors with similar hue and saturation but different lightness levels. This mode helps generate cohesive monochromatic designs. You can instantly update the base color through the color picker.
Gradient
Builds a gradient between your starting and ending color. Great for visual storytelling, heatmaps, or emphasizing transitions.
Advanced
Provides fine control over the palette generation, allowing you to experiment with interpolation, blending, and precision adjustments.
Framework Modes
KColor also includes preset-compatible generation modes for developers working with utility-first frameworks:
- Tailwind – Generates a full 50–900 scale to match Tailwind CSS naming conventions.
- Bootstrap – Outputs the core Bootstrap 5 color roles such as
primary,danger,warning, and more. - Radix – Generates a full 1-12 scale to match Radix CSS naming conventions.
Use cases
Designers can explore visual themes by switching between generation modes, while developers can instantly produce framework-ready palettes. It’s ideal for branding, UI systems, data visualization, or just creative experimentation.
Next steps
Click the dropdown at the top of the generator and try switching modes. Tailor your color output to your project’s context—whether you’re designing for accessibility, building UI kits, or preparing frontend stylesheets.
