Overview
LumexUI offers a flexible color system that includes 2 types of color palettes:
This system provides both stability and adaptability, allowing you to create a consistent and meaningful visual identity for your application.
Common Colors
The common colors are constants based on the full range of the expertly-crafted Tailwind colors, providing a great starting point if you don’t have your own specific branding in mind.
var blue = Colors.Blue["500"]; // oklch(0.623 0.214 259.815)
These colors are perfect for static UI elements or when you need precise control over specific design elements that don’t need to adapt to a dynamic theme.
As in Tailwind, common colors are represented using a scale from 50 to 950.
/// <summary>
/// The scale of blue colors.
/// </summary>
public readonly static Dictionary<string, string> Blue = new()
{
["50"] = "oklch(0.97 0.014 254.604)",
["100"] = "oklch(0.932 0.032 255.585)",
["200"] = "oklch(0.882 0.059 254.128)",
["300"] = "oklch(0.809 0.105 251.813)",
["400"] = "oklch(0.707 0.165 254.624)",
["500"] = "oklch(0.623 0.214 259.815)",
["600"] = "oklch(0.546 0.245 262.881)",
["700"] = "oklch(0.488 0.243 264.376)",
["800"] = "oklch(0.424 0.199 265.638)",
["900"] = "oklch(0.379 0.146 265.522)",
["950"] = "oklch(0.282 0.091 267.935)"
};
Semantic Colors
The semantic colors are designed to adapt with the theme, delivering meaning and enhancing your brand’s identity. Semantic colors are used throughout all LumexUI components and are mapped to specific roles, such as primary, secondary, success, or warning.
var primary = SemanticColors.Light.Primary["500"]; // oklch(0.623 0.214 259.815)
These colors are perfect for dynamic UI elements and are key to achieving a cohesive look that aligns with your brand’s identity.
Unlike common colors, semantic colors are not just a scale from 50 to 950;
they also include a default key, representing the primary color of the scale (e.g., 500),
and a foreground key, representing the contrasting text color for optimal readability.