颜色转换器 - HEX RGB HSL 在线转换工具

什么是颜色转换器？

颜色转换器是一种在线工具，用于在不同颜色格式之间进行转换。无论您是网页设计师、UI/UX 设计师还是前端开发人员，都可以使用此工具快速将颜色从一种格式转换为另一种格式。

支持的颜色格式

Web 标准颜色库

本工具内置了 140+ 种 Web 标准颜色，包含以下颜色系列：

• 红色系：IndianRed、Crimson、FireBrick、DarkRed 等 9 种
• 粉色系：Pink、HotPink、DeepPink、PaleVioletRed 等 6 种
• 橙色系：Coral、Tomato、OrangeRed、Orange 等 5 种
• 黄色系：Gold、Yellow、Khaki、DarkKhaki 等 10 种
• 绿色系：Lime、Green、ForestGreen、SeaGreen 等 23 种
• 青色系：Aqua、Cyan、Turquoise、Teal 等 9 种
• 蓝色系：Blue、Navy、RoyalBlue、SkyBlue 等 16 种
• 紫色系：Purple、Violet、Magenta、Indigo 等 17 种
• 棕色系：Brown、Chocolate、Sienna、Maroon 等 17 种
• 白色系：White、Snow、Ivory、Seashell 等 17 种
• 灰色系：Gray、Silver、Black、SlateGray 等 10 种

颜色转换示例

如何使用颜色转换器

1. 输入颜色：在 HEX、RGB 或 HSL 输入框中输入颜色值，或使用颜色选择器选择颜色
2. 实时转换：工具会自动将颜色转换为其他格式
3. 选择预设：点击常用颜色或 Web 标准颜色快速应用
4. 复制结果：点击复制按钮将颜色值复制到剪贴板
5. 随机颜色：点击随机按钮生成随机颜色

编程语言中处理颜色

// HEX 转 RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// RGB 转 HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }).join('');
}

// RGB 转 HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), 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) };
}

// CSS 颜色变量
document.documentElement.style.setProperty('--primary-color', '#3498db');

from PIL import ImageColor
import colorsys

# 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, g/255, b/255
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return (round(h * 360), round(s * 100), round(l * 100))

# HSL 转 RGB
def hsl_to_rgb(h, s, l):
    r, g, b = colorsys.hls_to_rgb(h/360, l/100, s/100)
    return (round(r * 255), round(g * 255), round(b * 255))

# 使用 PIL 获取颜色
rgb = ImageColor.getrgb('#FF5733')
print(rgb)  # (255, 87, 51)

import java.awt.Color;

// HEX 转 RGB
Color color = Color.decode("#FF5733");
int r = color.getRed();
int g = color.getGreen();
int b = color.getBlue();

// RGB 转 HEX
Color rgbColor = new Color(255, 87, 51);
String hex = String.format("#%02X%02X%02X", 
    rgbColor.getRed(), rgbColor.getGreen(), rgbColor.getBlue());

// RGB 转 HSL
public static float[] rgbToHsl(int r, int g, int b) {
    float rf = r / 255f, gf = g / 255f, bf = b / 255f;
    float max = Math.max(rf, Math.max(gf, bf));
    float min = Math.min(rf, Math.min(gf, bf));
    float h, s, l = (max + min) / 2;
    
    if (max == min) {
        h = s = 0;
    } else {
        float d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        if (max == rf) h = (gf - bf) / d + (gf < bf ? 6 : 0);
        else if (max == gf) h = (bf - rf) / d + 2;
        else h = (rf - gf) / d + 4;
        h /= 6;
    }
    return new float[]{h * 360, s * 100, l * 100};
}

// HEX 转 RGB
function hexToRgb($hex) {
    $hex = str_replace('#', '', $hex);
    return [
        'r' => hexdec(substr($hex, 0, 2)),
        'g' => hexdec(substr($hex, 2, 2)),
        'b' => hexdec(substr($hex, 4, 2))
    ];
}

// RGB 转 HEX
function rgbToHex($r, $g, $b) {
    return '#' . sprintf('%02x%02x%02x', $r, $g, $b);
}

// RGB 转 HSL
function rgbToHsl($r, $g, $b) {
    $r /= 255; $g /= 255; $b /= 255;
    $max = max($r, $g, $b);
    $min = min($r, $g, $b);
    $l = ($max + $min) / 2;
    
    if ($max === $min) {
        $h = $s = 0;
    } else {
        $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 [round($h * 360), round($s * 100), round($l * 100)];
}

import (
    "fmt"
    "image/color"
    "strconv"
)

// HEX 转 RGB
func hexToRGB(hex string) (r, g, b uint8) {
    hex = strings.TrimPrefix(hex, "#")
    val, _ := strconv.ParseUint(hex, 16, 32)
    return uint8(val >> 16), uint8(val >> 8 & 0xFF), uint8(val & 0xFF)
}

// RGB 转 HEX
func rgbToHex(r, g, b uint8) string {
    return fmt.Sprintf("#%02X%02X%02X", r, g, b)
}

// 使用 color 包
c := color.RGBA{R: 255, G: 87, B: 51, A: 255}
hex := fmt.Sprintf("#%02X%02X%02X", c.R, c.G, c.B)

// 解析颜色名称
colors := map[string]color.RGBA{
    "red":   {R: 255, G: 0, B: 0, A: 255},
    "green": {R: 0, G: 128, B: 0, A: 255},
    "blue":  {R: 0, G: 0, B: 255, A: 255},
}

using System.Drawing;

// HEX 转 Color
Color color = ColorTranslator.FromHtml("#FF5733");
int r = color.R, g = color.G, b = color.B;

// RGB 转 HEX
Color rgbColor = Color.FromArgb(255, 87, 51);
string hex = quot;#{rgbColor.R:X2}{rgbColor.G:X2}{rgbColor.B:X2}";

// RGB 转 HSL
public static (double h, double s, double l) RgbToHsl(int r, int g, int b) {
    double rf = r / 255.0, gf = g / 255.0, bf = b / 255.0;
    double max = Math.Max(rf, Math.Max(gf, bf));
    double min = Math.Min(rf, Math.Min(gf, bf));
    double h = 0, s = 0, l = (max + min) / 2;
    
    if (max != min) {
        double d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        if (max == rf) h = (gf - bf) / d + (gf < bf ? 6 : 0);
        else if (max == gf) h = (bf - rf) / d + 2;
        else h = (rf - gf) / d + 4;
        h /= 6;
    }
    return (h * 360, s * 100, l * 100);
}

// 使用预定义颜色
Color red = Color.Red;
Color blue = Color.DodgerBlue;

# HEX 转 RGB
def hex_to_rgb(hex)
  hex = hex.delete('#')
  [hex[0..1].to_i(16), hex[2..3].to_i(16), hex[4..5].to_i(16)]
end

# RGB 转 HEX
def rgb_to_hex(r, g, b)
  '#%02X%02X%02X' % [r, g, b]
end

# RGB 转 HSL
def rgb_to_hsl(r, g, b)
  r, g, b = r / 255.0, g / 255.0, b / 255.0
  max = [r, g, b].max
  min = [r, g, b].min
  l = (max + min) / 2
  
  if max == min
    h = s = 0
  else
    d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
    h = case max
        when r then ((g - b) / d + (g < b ? 6 : 0)) / 6
        when g then ((b - r) / d + 2) / 6
        when b then ((r - g) / d + 4) / 6
        end
  end
  [(h * 360).round, (s * 100).round, (l * 100).round]
end

/* CSS 颜色函数 */

/* RGB 和 RGBA */
.element {
  background-color: rgb(255, 87, 51);
  background-color: rgba(255, 87, 51, 0.8);
}

/* HSL 和 HSLA */
.element {
  background-color: hsl(11, 100%, 60%);
  background-color: hsla(11, 100%, 60%, 0.8);
}

/* CSS 变量 */
:root {
  --primary: #3498db;
  --secondary: rgb(46, 204, 113);
  --accent: hsl(283, 39%, 53%);
}

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

/* SCSS 颜色函数 */
$primary: #3498db;

.element {
  background: lighten($primary, 20%);
  border-color: darken($primary, 10%);
  color: complement($primary);
}

常见问题