Complete Color Tools Guide: Conversion, Contrast & Palette Principles

Color is the most intuitive visual language in interface design. Whether restoring brand colors, ensuring text readability, or building harmonious palettes, you need a solid grasp of color formats, conversion rules, and contrast principles. This article starts from color basics, systematically explains the conversion principles of common formats such as HEX, RGB, HSL, HSV, and CMYK, combines the WCAG contrast standard with palette generation algorithms, and provides ready-to-use frontend code examples to help you master color in design and development.

I. Color Basics

Before understanding color tools, you need to clarify how color is produced and how the human eye perceives it. Screen colors and print colors follow different mixing models, which determines the applicable scope of each color format.

1.1 Light and Color

Color is not an inherent property of objects, but a visual sensation produced when light of different wavelengths enters the eye. Screens produce color by emitting light, while prints produce color by reflecting ambient light. The two correspond to the additive and subtractive models respectively.

1.2 The Additive RGB Model

Screens use the additive model, based on three primary colors: Red, Green, and Blue. The more the three light beams overlap, the closer the result is to white; when all three are zero, the result is black. The RGB model covers most of the colors a screen can display and is the common basis for formats such as HEX, RGB, and RGBA.

• Red Channel (R): Controls the intensity of red light, range 0-255
• Green Channel (G): Controls the intensity of green light, range 0-255
• Blue Channel (B): Controls the intensity of blue light, range 0-255

1.3 Human Perception

The human eye has different sensitivities to different wavelengths, being most sensitive to green and least to blue. This also explains why green has the highest weight and blue the lowest when calculating relative luminance. Understanding this helps you more accurately estimate how a color will actually appear on screen.

II. Common Color Formats

Several color formats are commonly used in frontend development. They are all based on RGB, but their representations differ. Mastering the structure and use cases of each format is a prerequisite for using color tools effectively.

2.1 HEX Format

HEX uses hexadecimal notation to represent color in the form #RRGGBB, where every two digits correspond to an RGB channel with values 00-FF. For example, #FF5733 means R=255, G=87, B=51. It is compact and widely compatible, making it one of the most common color notations in CSS. It also supports the shorthand #RGB and the alpha-extended #RRGGBBAA forms.

2.2 RGB and RGBA

RGB represents color as a function: rgb(255, 87, 51). RGBA adds an alpha channel for opacity, with a value between 0 and 1. For example, rgba(255, 87, 51, 0.5) means semi-transparent. An alpha of 0 is fully transparent, and 1 is fully opaque.

2.3 HSL and HSLA

HSL describes color with three dimensions: Hue, Saturation, and Lightness. Hue ranges from 0 to 360 degrees, corresponding to a position on the color wheel; saturation and lightness are expressed as percentages. For example, hsl(11, 100%, 60%). HSLA adds an alpha channel. HSL is closer to how people intuitively describe color, making it convenient for color adjustment.

2.4 HSV and HSB

HSV (Hue, Saturation, Value) and HSB (Hue, Saturation, Brightness) are the same model, describing color with hue, saturation, and value/brightness. The difference from HSL lies in how lightness is defined: in HSV, V=100% corresponds to a pure color, while in HSL, L=50% corresponds to a pure color. HSV is more common in image editing software.

2.5 CMYK

CMYK is a subtractive model used in printing, mixing four inks: Cyan, Magenta, Yellow, and Key/Black. It uses percentages ranging from 0 to 100%. Since screens use the additive model, conversion between CMYK and RGB depends on device color profiles and can only be approximate.

III. Color Format Conversion Comparison

Formats can be converted between each other, but the conversion paths are not entirely equivalent. HEX and RGB are precise one-to-one conversions; HSL and HSV need to be converted back to RGB first; CMYK can only be approximately converted due to color space differences. The table below compares the key features of each format:

Note that HSL and HSV cannot be directly converted to each other. Both must first be reduced to RGB before conversion. CMYK to RGB results vary with the color profile, so screen previews may differ from actual printed output.

IV. Advantages of HSL and HSV

Compared to directly manipulating RGB channels, HSL and HSV describe color in a way that is closer to human intuition, offering clear advantages in color adjustment:

• Intuitive adjustment: Hue directly corresponds to a position on the color wheel, making it easy to quickly locate a target color
• Lightness control: Adjust lightness independently without changing hue or saturation
• Saturation control: Adjust vividness separately, useful for generating tonal layers of the same color
• Hue wheel derivation: Complementary, triadic and other palettes can be derived from hue angles

V. Color Contrast and Accessibility

Color contrast determines whether text is clearly readable and is a core metric in accessibility design. The Web Content Accessibility Guidelines (WCAG) set clear requirements for the luminance ratio between foreground and background colors.

5.1 The WCAG Standard

WCAG divides contrast requirements into two levels, AA and AAA, and sets thresholds for normal text, large text, and UI components respectively. The contrast ratio is expressed as the ratio of the relative luminance of the foreground to the background, ranging from 1:1 to 21:1.

5.2 Contrast Calculation Formula

Contrast is calculated in two steps: first find the relative luminance of the foreground and background (L1 and L2, with the larger as L1), then apply the following formula:

Contrast = (L1 + 0.05) / (L2 + 0.05)

VI. Palette Generation Principles

Palette generators are usually based on the color wheel and derive harmonious color schemes through fixed angular relationships. Different angle combinations correspond to different color styles. The table below compares common palette types:

Common derivation schemes can be summarized as follows:

• Complementary: Takes the opposite color at 180 degrees on the wheel; strong contrast, ideal for highlighting key actions
• Analogous: Takes colors within 30-60 degrees of adjacent hues; overall harmonious and soft
• Triadic: Divides the wheel into three equal parts at 120-degree intervals; rich and balanced
• Split-complementary: Takes one color on each side of the complementary color; moderate contrast and easier to control
• Rectangular (Tetradic): Composed of two pairs of complementary colors; rich but requires attention to hierarchy
• Monochrome: Keeps hue unchanged, only adjusting lightness and saturation; clear and layered

VII. Frontend Color Code Examples

Below are commonly used color conversion and contrast calculation functions that can be used directly in frontend projects. They cover four core scenarios: HEX/RGB conversion, RGB to HSL, relative luminance, and contrast calculation.

7.1 HEX and RGB Conversion

// HEX to RGB
function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  const num = parseInt(hex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const h = Math.max(0, Math.min(255, Math.round(n))).toString(16);
    return h.length === 1 ? '0' + h : h;
  };
  return '#' + toHex(r) + toHex(g) + toHex(b);
}

console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }
console.log(rgbToHex(255, 87, 51)); // #ff5733

7.2 RGB to HSL

// RGB to HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  let h = 0;
  let s = 0;
  const l = (max + min) / 2;

  if (d !== 0) {
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h *= 60;
  }
  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(rgbToHsl(255, 87, 51)); // { h: 11, s: 100, l: 60 }

7.3 Relative Luminance Calculation

// Calculate relative luminance (WCAG standard)
function relativeLuminance(r, g, b) {
  const channel = (c) => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  };
  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
}

console.log(relativeLuminance(255, 255, 255)); // 1 (pure white)
console.log(relativeLuminance(0, 0, 0));       // 0 (pure black)

7.4 Contrast Calculation

// Calculate contrast between two colors
function contrastRatio(rgb1, rgb2) {
  const l1 = relativeLuminance(rgb1.r, rgb1.g, rgb1.b);
  const l2 = relativeLuminance(rgb2.r, rgb2.g, rgb2.b);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

const white = { r: 255, g: 255, b: 255 };
const darkText = { r: 51, g: 51, b: 51 };
console.log(contrastRatio(white, darkText)); // about 10.36, meets AAA level

VIII. Palette Design Practices

In real projects, color needs to take on clear functional roles and organize visual hierarchy through proportions. Below are common role divisions and proportioning methods.

8.1 Primary, Secondary, and Accent Colors

A complete color scheme usually contains three types of roles, each with different responsibilities:

• Primary color: Represents the brand and core mood; used for navigation, buttons, and other key positions
• Secondary color: Harmonizes with the primary color; used for secondary content and backgrounds to enrich visual layers
• Accent color: Contrasts with the primary color; used for alerts, links, and elements that need emphasis

8.2 The 60-30-10 Rule

The 60-30-10 rule is a classic color proportioning method that ensures overall harmony and visual focus by controlling the share of three color categories:

• 60% Primary color: Used for large background areas and the base mood
• 30% Secondary color: Used for secondary regions and content grouping
• 10% Accent color: Used for key actions and visual focus

IX. Tudousi Color Toolset

Tudousi Tools provides a set of color-related tools covering three scenarios: format conversion, color picking with contrast checks, and palette generation, helping you put the above principles into practice.

9.1 Color Format Converter

9.2 Color Picker and Contrast Checker

9.3 Palette Generator

X. Summary

The core of color tools lies in an accurate understanding of color formats, conversion rules, and contrast principles. From the RGB additive model to intuitive HSL/HSV adjustment, to WCAG contrast and palette generation algorithms, each part directly affects whether the final interface is harmonious and readable.

In practice, combine the 60-30-10 rule with a role-based color approach, and use the Tudousi color toolset for format conversion, contrast checks, and palette generation. Mastering these principles and tools lets you handle color more efficiently and precisely in design and development.