Color

Last updated: 17 days ago

Category: Basic

Explains the relationship between color utility classes and CSS variables for color generation. This article provides a clear understanding of how OrcaUI's color theme system works, empowering users t...

Color Systems

This framework divides colors into 4 main categories:

• Primary color system: prim (any color)
• Status color system:
  • error (red, indicates errors/failures)
  • warn (yellow, indicates warnings/alerts)
  • succ (green, indicates correctness/success)
  • info (blue, indicates notifications/information)
  • issue (orange, indicates problems/questions)
• Text color system:
  • text (dark gray by default, white in dark mode - for headings/main content)
  • brief (medium gray by default - for content summaries)
  • caption (light gray - for auxiliary content)
  • disable (similar to caption light gray - for disabled states)
• Special color system:
  • stage (main stage/body background color, white by default)
  • divide (divider line color with transparency, appears as light border color)
  • white Pure white
  • black Pure black
  • mask Mask color with transparency
  • text-sta Static text color (remains unchanged in dark mode)

Color Models

There are many ways to express colors, traditionally using RGB/RGBA and HEX (hexadecimal). This framework uses the HSLA model.

In HSLA:

• H represents hue on the color wheel (0-360 degrees)
• S represents saturation (0%-100%)
• L represents lightness (0%-100%)
• A represents alpha/transparency (0-1)

The framework's default primary color is HSLA(210,100%,55%,1).

A key advantage of HSLA is the ability to easily modify color systems by precisely controlling color channels.

In CSS, the primary color variable --_c-prim is composed of:

• --_h-prim: Defines hue (default 210)
• --_s-prim: Defines saturation (default 100%)
• --_l-prim: Defines lightness (default 55%)
• --_a-prim: Defines alpha (default 1)

We can modify these channel values to change the color.

Naming Conventions

A color system needs to express multiple meanings through various supporting colors, achieved by modifying color channel values. Our naming conventions are:

• *-bg: Light background color (~0.04 transparency)
• *-bd: Light border color
• *-fc: Light focus color
• *-ht: Neutral halftone color
• *-aj: Similar color (hue +50, adjacent)
• *-sg: Dark color with high saturation (sunglass)
• *-dp: Darkened color (deepen)
• *-gy: Medium gray
• *-dk: Dark gray
• *-ct: Contrast color (~hue +180)
• *-tp: Transparent (alpha 0)
• *-ac: Acrylic color (~0.08 transparency)
• *-sd: Shadow color (~0.2 transparency)
• *-tl: Translucent color (~0.6 transparency)
• *-fg: Frosted glass color (~0.8 transparency)

The prim color includes the complete naming set.

Custom Buttons

Now that we understand color systems and naming conventions, we can use all colors in the prim system to create custom buttons.

Text Color System

No -gy, -dk or -sg suffixes.

• --_h-text: Text color hue
• --_s-text: Text color saturation
• --_l-text: Text color lightness
• --_a-text: Text color alpha
• --_c-text: Main text color
• --_c-text-bg: Light background color
• --_c-text-bd: Light border color
• --_c-text-fc: Focus color
• --_c-text-ht: Halftone color
• --_c-text-lt: Lightened color
• --_c-text-dp: Darkened color
• --_c-text-aj: Similar color
• --_c-text-ct: Contrast color
• --_c-text-tp: Transparent
• --_c-text-ac: Acrylic color
• --_c-text-sd: Shadow color
• --_c-text-tl: Translucent color
• --_c-text-fg: Frosted glass color

Brief Color System

• --_c-brief: Brief text color (same as --_c-text-aj)
• --_c-brief-bg: Light background color for brief text (same as --_c-text-bg)
• --_c-brief-bd: Light border color for brief text (same as --_c-brief)
• --_c-brief-sd: Shadow color for brief text (same as --_c-text-sd)

Caption Color System

• --_c-caption: Secondary/ignored text color
• --_c-caption-bg: Light background color for captions (slightly darker than --_c-text-bg)
• --_c-caption-bd: Light border color for captions (same as --_c-caption)
• --_c-caption-sd: Shadow color for captions (slightly lighter than --_c-text-sd)

Disabled Color System

• --_c-disable: Disabled state color
• --_c-disable-bg: Light background color for disabled elements (slightly darker than --_c-text-bg)
• --_c-disable-bd: Light border color for disabled elements (same as --_c-disable)
• --_c-disable-sd: Shadow color for disabled elements (slightly lighter than --_c-text-sd)

Success Color System

(No -gy, -dk, -ct or -sg suffixes)

• --h-succ: Hue value
• --s-succ: Saturation
• --l-succ: Lightness
• --a-succ: Alpha/transparency
• --_c-succ: Success state color
• --_c-succ-bg: Light background color
• --_c-succ-bd: Light border color
• --_c-succ-fc: Focus color
• --_c-succ-ht: Halftone color
• --_c-succ-lt: Lightened variant
• --_c-succ-dp: Darkened variant
• --_c-succ-aj: Similar/adjacent color
• --_c-succ-tp: Fully transparent color
• --_c-succ-ac: Acrylic/glass effect color
• --_c-succ-sd: Shadow color
• --_c-succ-tl: Semi-transparent color
• --_c-succ-fg: Frosted glass effect color

Error Color System

(No -gy, -dk, -ct or -sg suffixes)

• --h-error: Hue value
• --s-error: Saturation
• --l-error: Lightness
• --a-error: Alpha/transparency
• --_c-error: Error state color
• --_c-error-bg: Light background color
• --_c-error-bd: Light border color
• --_c-error-fc: Focus color
• --_c-error-ht: Halftone color
• --_c-error-lt: Lightened variant
• --_c-error-dp: Darkened variant
• --_c-error-aj: Similar/adjacent color
• --_c-error-tp: Fully transparent color
• --_c-error-ac: Acrylic/glass effect color
• --_c-error-sd: Shadow color
• --_c-error-tl: Semi-transparent color
• --_c-error-fg: Frosted glass effect color

Info Color System

(No -gy, -dk, -ct or -sg suffixes)

• --h-info: Hue value
• --s-info: Saturation
• --l-info: Lightness
• --a-info: Alpha/transparency
• --_c-info: Information state color
• --_c-info-bg: Light background color
• --_c-info-bd: Light border color
• --_c-info-fc: Focus color
• --_c-info-ht: Halftone color
• --_c-info-lt: Lightened variant
• --_c-info-dp: Darkened variant
• --_c-info-aj: Similar/adjacent color
• --_c-info-tp: Fully transparent color
• --_c-info-ac: Acrylic/glass effect color
• --_c-info-sd: Shadow color
• --_c-info-tl: Semi-transparent color
• --_c-info-fg: Frosted glass effect color

Warning Color System

(No -gy, -dk, -ct or -sg suffixes)

• --h-warn: Hue value
• --s-warn: Saturation
• --l-warn: Lightness
• --a-warn: Alpha/transparency
• --_c-warn: Warning state color
• --_c-warn-bg: Light background color
• --_c-warn-bd: Light border color
• --_c-warn-fc: Focus color
• --_c-warn-ht: Halftone color
• --_c-warn-lt: Lightened variant
• --_c-warn-dp: Darkened variant
• --_c-warn-aj: Similar/adjacent color
• --_c-warn-tp: Fully transparent color
• --_c-warn-ac: Acrylic/glass effect color
• --_c-warn-sd: Shadow color
• --_c-warn-tl: Semi-transparent color
• --_c-warn-fg: Frosted glass effect color

Issue Color System

(No -gy, -dk, -ct or -sg suffixes)

• --h-issue: Hue value
• --s-issue: Saturation
• --l-issue: Lightness
• --a-issue: Alpha/transparency
• --_c-issue: Issue state color
• --_c-issue-bg: Light background color
• --_c-issue-bd: Light border color
• --_c-issue-fc: Focus color
• --_c-issue-ht: Halftone color
• --_c-issue-lt: Lightened variant
• --_c-issue-dp: Darkened variant
• --_c-issue-aj: Similar/adjacent color
• --_c-issue-tp: Fully transparent color
• --_c-issue-ac: Acrylic/glass effect color
• --_c-issue-sd: Shadow color
• --_c-issue-tl: Semi-transparent color
• --_c-issue-fg: Frosted glass effect color

Color Combinations

The framework has predefined common color combinations including primary, darkened, annotation, border and background colors. You'll see practical applications in components like button, alert, and panel.

• dp (deepen): Darkened variant of the base color, typically used in areas with background colors
• bg (background): Lightest variant based on the base color, typically used as background
• bd (border): Slightly darker than bg color, typically used for borders
• ht (halftone): Halftone color with lower saturation and brightness than base color, typically used for annotations or hint text

Additionally they share common suffixes:

• fc (focus color)
• aj (similar/adjacent color)

The primary color (prim) also has:

• dk (dark gray)
• gy (medium gray)
• ct (contrast color)
• sg (high saturation ink color)

Theme Switching

Since color variables are known, theme styles can be freely customized.

Status colors (error, success etc.) are standard across projects and typically only need hue adjustments. Theme changes mainly involve modifying primary color variables.

Most commercial projects use one primary + one secondary color, plus web-safe colors. The framework's color variables support this common triad color scheme.