Colors

Overview

LumexUI offers a flexible color system that includes 2 types of color palettes:

• Common Colors
• Semantic Colors

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 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"]; // #3b82f6

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"] = "#eff6ff",
    ["100"] = "#dbeafe",
    ["200"] = "#bfdbfe",
    ["300"] = "#93c5fd",
    ["400"] = "#60a5fa",
    ["500"] = "#3b82f6",
    ["600"] = "#2563eb",
    ["700"] = "#1d4ed8",
    ["800"] = "#1e40af",
    ["900"] = "#1e3a8a",
    ["950"] = "#172554"
};

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"]; // #3b82f6

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.

Customization