颜色选择

选择颜色并查看多种格式

HEX

RGB

HSL

CMYK

R (红) 59

G (绿) 130

B (蓝) 246

A (透明度) 100%

渐变生成器

创建CSS渐变效果

起始颜色

结束颜色

方向

CSS代码

background: linear-gradient(to right, #3B82F6, #8B5CF6);

配色方案

基于选定颜色生成协调的配色方案

对比度检测

检查前景色和背景色的对比度是否符合WCAG标准

示例文本

前景色

背景色

对比度比值： 21:1

正常文字 (AA)：通过 ✓

大文字 (AA)：通过 ✓

正常文字 (AAA)：通过 ✓

大文字 (AAA)：通过 ✓

代码示例

以下是在不同编程语言中处理颜色格式的代码示例：

JavaScript 颜色转换

// HEX 转 RGB
function hexToRgb(hex) {
    // 移除 #
    hex = hex.replace(/^#/, '');
    
    // 解析
    const bigint = parseInt(hex, 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    
    return { r, g, b };
}

// RGB 转 HEX
function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// RGB 转 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);
    let h, s, l = (max + min) / 2;
    
    if (max === min) {
        h = s = 0;
    } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        
        switch (max) {
            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }
    
    return {
        h: Math.round(h * 360),
        s: Math.round(s * 100),
        l: Math.round(l * 100)
    };
}

// HSL 转 RGB
function hslToRgb(h, s, l) {
    h /= 360;
    s /= 100;
    l /= 100;
    
    let r, g, b;
    
    if (s === 0) {
        r = g = b = l;
    } else {
        const hue2rgb = (p, q, t) => {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1/6) return p + (q - p) * 6 * t;
            if (t < 1/2) return q;
            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        };
        
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
    
    return {
        r: Math.round(r * 255),
        g: Math.round(g * 255),
        b: Math.round(b * 255)
    };
}

// 计算对比度 (WCAG)
function getContrastRatio(color1, color2) {
    const getLuminance = (r, g, b) => {
        [r, g, b] = [r, g, b].map(v => {
            v /= 255;
            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        });
        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    };
    
    const lum1 = getLuminance(color1.r, color1.g, color1.b);
    const lum2 = getLuminance(color2.r, color2.g, color2.b);
    
    const lighter = Math.max(lum1, lum2);
    const darker = Math.min(lum1, lum2);
    
    return (lighter + 0.05) / (darker + 0.05);
}

Python 颜色转换

# HEX 转 RGB
def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

# RGB 转 HEX
def rgb_to_hex(r, g, b):
    return '#{:02x}{:02x}{:02x}'.format(r, g, b)

# RGB 转 HSL
def rgb_to_hsl(r, g, b):
    r, g, b = r/255.0, g/255.0, b/255.0
    max_val = max(r, g, b)
    min_val = min(r, g, b)
    l = (max_val + min_val) / 2
    
    if max_val == min_val:
        h = s = 0
    else:
        d = max_val - min_val
        s = d / (2 - max_val - min_val) if l > 0.5 else d / (max_val + min_val)
        
        if max_val == r:
            h = ((g - b) / d + (6 if g < b else 0)) / 6
        elif max_val == g:
            h = ((b - r) / d + 2) / 6
        else:
            h = ((r - g) / d + 4) / 6
    
    return (int(h * 360), int(s * 100), int(l * 100))

# HSL 转 RGB
def hsl_to_rgb(h, s, l):
    h, s, l = h/360.0, s/100.0, l/100.0
    
    if s == 0:
        r = g = b = l
    else:
        def hue_to_rgb(p, q, t):
            if t < 0: t += 1
            if t > 1: t -= 1
            if t < 1/6: return p + (q - p) * 6 * t
            if t < 1/2: return q
            if t < 2/3: return p + (q - p) * (2/3 - t) * 6
            return p
        
        q = l * (1 + s) if l < 0.5 else l + s - l * s
        p = 2 * l - q
        
        r = hue_to_rgb(p, q, h + 1/3)
        g = hue_to_rgb(p, q, h)
        b = hue_to_rgb(p, q, h - 1/3)
    
    return (int(r * 255), int(g * 255), int(b * 255))

CSS 颜色使用

/* 不同颜色格式的CSS使用 */

/* HEX格式 */
.element {
    color: #3B82F6;
    background-color: #ffffff;
}

/* RGB格式 */
.element {
    color: rgb(59, 130, 246);
    background-color: rgb(255, 255, 255);
}

/* RGBA格式 (带透明度) */
.element {
    color: rgba(59, 130, 246, 0.8);
    background-color: rgba(255, 255, 255, 0.9);
}

/* HSL格式 */
.element {
    color: hsl(217, 91%, 60%);
    background-color: hsl(0, 0%, 100%);
}

/* HSLA格式 (带透明度) */
.element {
    color: hsla(217, 91%, 60%, 0.8);
}

/* 线性渐变 */
.gradient {
    background: linear-gradient(to right, #3B82F6, #8B5CF6);
}

/* 径向渐变 */
.radial-gradient {
    background: radial-gradient(circle, #3B82F6, #8B5CF6);
}

/* CSS变量 (推荐用于主题色) */
:root {
    --primary-color: #3B82F6;
    --secondary-color: #8B5CF6;
    --text-color: #1F2937;
    --bg-color: #ffffff;
}

.button {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

关于颜色格式

HEX 颜色

HEX（十六进制）是Web开发中最常用的颜色格式。它由6个十六进制字符组成，前两个字符表示红色，中间两个表示绿色，后两个表示蓝色。每个字符的范围是0-F（0-15）。

例如：#3B82F6表示红色59（0x3B）、绿色130（0x82）、蓝色246（0xF6）。

RGB 颜色

RGB（红绿蓝）使用三个数值来表示颜色，每个数值范围在0-255之间。RGB更直观，容易理解每种颜色分量的强度。

例如：rgb(59, 130, 246)表示红色59、绿色130、蓝色246。

HSL 颜色

HSL（色相、饱和度、亮度）更符合人类对颜色的感知方式：

色相（H）：0-360度，表示颜色的类型（红色、蓝色等）
饱和度（S）：0-100%，表示颜色的纯度
亮度（L）：0-100%，表示颜色的明暗

例如：hsl(217, 91%, 60%)表示蓝色系、高饱和度、中等亮度。

CMYK 颜色

CMYK（青、品红、黄、黑）是印刷行业常用的颜色模式。与RGB的加色模式不同，CMYK是减色模式，通过吸收光来显示颜色。

对比度和可访问性

根据WCAG（Web内容可访问性指南）标准，文本和背景之间的对比度应满足：

AA级别：正常文本至少4.5:1，大文本至少3:1
AAA级别：正常文本至少7:1，大文本至少4.5:1

颜色选择器工具