• Omnilude Tools在线工具集合
  • 首页
在线工具
  • 开发者工具
    • UUID生成器
    • 时间戳转换器
    • 编码器/解码器
    • 颜色选择器
    • 正则表达式测试器
    • 数据转换
    • 哈希生成器
    • Cron表达式
    • 命名规则转换
    • JWT 调试器
    • 浏览器信息
    • 进制转换
    • Meta标签生成器
    • 密码
  • 文本工具
  • 实用工具
  • 时间工具
  • 计算工具

颜色选择器

转换颜色代码

更新

最近上线的改进

新
切换主题
浅色模式
深色模式
系统设置

选择颜色

R
G
B

颜色值

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

调色板

点击选择并复制
base

white

#FFFFFF

black

#000000

slate

slate-50

#F8FAFC

slate-100

#F1F5F9

slate-200

#E2E8F0

slate-300

#CBD5E1

slate-400

#94A3B8

slate-500

#64748B

slate-600

#475569

slate-700

#334155

slate-800

#1E293B

slate-900

#0F172A

slate-950

#020617

gray

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

gray-950

#030712

zinc

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-300

#D4D4D8

zinc-400

#A1A1AA

zinc-500

#71717A

zinc-600

#52525B

zinc-700

#3F3F46

zinc-800

#27272A

zinc-900

#18181B

zinc-950

#09090B

neutral

neutral-50

#FAFAFA

neutral-100

#F5F5F5

neutral-200

#E5E5E5

neutral-300

#D4D4D4

neutral-400

#A3A3A3

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0A0A0A

stone

stone-50

#FAFAF9

stone-100

#F5F5F4

stone-200

#E7E5E4

stone-300

#D6D3D1

stone-400

#A8A29E

stone-500

#78716C

stone-600

#57534E

stone-700

#44403C

stone-800

#292524

stone-900

#1C1917

stone-950

#0C0A09

red

red-50

#FEF2F2

red-100

#FEE2E2

red-200

#FECACA

red-300

#FCA5A5

red-400

#F87171

red-500

#EF4444

red-600

#DC2626

red-700

#B91C1C

red-800

#991B1B

red-900

#7F1D1D

red-950

#450A0A

orange

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-300

#FDBA74

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

orange-800

#9A3412

orange-900

#7C2D12

orange-950

#431407

amber

amber-50

#FFFBEB

amber-100

#FEF3C7

amber-200

#FDE68A

amber-300

#FCD34D

amber-400

#FBBF24

amber-500

#F59E0B

amber-600

#D97706

amber-700

#B45309

amber-800

#92400E

amber-900

#78350F

amber-950

#451A03

yellow

yellow-50

#FEFCE8

yellow-100

#FEF9C3

yellow-200

#FEF08A

yellow-300

#FDE047

yellow-400

#FACC15

yellow-500

#EAB308

yellow-600

#CA8A04

yellow-700

#A16207

yellow-800

#854D0E

yellow-900

#713F12

yellow-950

#422006

lime

lime-50

#F7FEE7

lime-100

#ECFCCB

lime-200

#D9F99D

lime-300

#BEF264

lime-400

#A3E635

lime-500

#84CC16

lime-600

#65A30D

lime-700

#4D7C0F

lime-800

#3F6212

lime-900

#365314

lime-950

#1A2E05

green

green-50

#F0FDF4

green-100

#DCFCE7

green-200

#BBF7D0

green-300

#86EFAC

green-400

#4ADE80

green-500

#22C55E

green-600

#16A34A

green-700

#15803D

green-800

#166534

green-900

#14532D

green-950

#052E16

emerald

emerald-50

#ECFDF5

emerald-100

#D1FAE5

emerald-200

#A7F3D0

emerald-300

#6EE7B7

emerald-400

#34D399

emerald-500

#10B981

emerald-600

#059669

emerald-700

#047857

emerald-800

#065F46

emerald-900

#064E3B

emerald-950

#022C22

teal

teal-50

#F0FDFA

teal-100

#CCFBF1

teal-200

#99F6E4

teal-300

#5EEAD4

teal-400

#2DD4BF

teal-500

#14B8A6

teal-600

#0D9488

teal-700

#0F766E

teal-800

#115E59

teal-900

#134E4A

teal-950

#042F2E

cyan

cyan-50

#ECFEFF

cyan-100

#CFFAFE

cyan-200

#A5F3FC

cyan-300

#67E8F9

cyan-400

#22D3EE

cyan-500

#06B6D4

cyan-600

#0891B2

cyan-700

#0E7490

cyan-800

#155E75

cyan-900

#164E63

cyan-950

#083344

sky

sky-50

#F0F9FF

sky-100

#E0F2FE

sky-200

#BAE6FD

sky-300

#7DD3FC

sky-400

#38BDF8

sky-500

#0EA5E9

sky-600

#0284C7

sky-700

#0369A1

sky-800

#075985

sky-900

#0C4A6E

sky-950

#082F49

blue

blue-50

#EFF6FF

blue-100

#DBEAFE

blue-200

#BFDBFE

blue-300

#93C5FD

blue-400

#60A5FA

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

blue-900

#1E3A8A

blue-950

#172554

indigo

indigo-50

#EEF2FF

indigo-100

#E0E7FF

indigo-200

#C7D2FE

indigo-300

#A5B4FC

indigo-400

#818CF8

indigo-500

#6366F1

indigo-600

#4F46E5

indigo-700

#4338CA

indigo-800

#3730A3

indigo-900

#312E81

indigo-950

#1E1B4B

violet

violet-50

#F5F3FF

violet-100

#EDE9FE

violet-200

#DDD6FE

violet-300

#C4B5FD

violet-400

#A78BFA

violet-500

#8B5CF6

violet-600

#7C3AED

violet-700

#6D28D9

violet-800

#5B21B6

violet-900

#4C1D95

violet-950

#2E1065

purple

purple-50

#FAF5FF

purple-100

#F3E8FF

purple-200

#E9D5FF

purple-300

#D8B4FE

purple-400

#C084FC

purple-500

#A855F7

purple-600

#9333EA

purple-700

#7E22CE

purple-800

#6B21A8

purple-900

#581C87

purple-950

#3B0764

fuchsia

fuchsia-50

#FDF4FF

fuchsia-100

#FAE8FF

fuchsia-200

#F5D0FE

fuchsia-300

#F0ABFC

fuchsia-400

#E879F9

fuchsia-500

#D946EF

fuchsia-600

#C026D3

fuchsia-700

#A21CAF

fuchsia-800

#86198F

fuchsia-900

#701A75

fuchsia-950

#4A044E

pink

pink-50

#FDF2F8

pink-100

#FCE7F3

pink-200

#FBCFE8

pink-300

#F9A8D4

pink-400

#F472B6

pink-500

#EC4899

pink-600

#DB2777

pink-700

#BE185D

pink-800

#9D174D

pink-900

#831843

pink-950

#500724

rose

rose-50

#FFF1F2

rose-100

#FFE4E6

rose-200

#FECDD3

rose-300

#FDA4AF

rose-400

#FB7185

rose-500

#F43F5E

rose-600

#E11D48

rose-700

#BE123C

rose-800

#9F1239

rose-900

#881337

rose-950

#4C0519

颜色格式

HEX

#RRGGBB格式。CSS中最常用

RGB

红、绿、蓝（0-255）

HSL

色相、饱和度、亮度。直观的颜色调整

HSV/HSB

色相、饱和度、明度。用于图形工具

OKLCH

感知均匀的现代CSS颜色空间

RGBA/HSLA

包含Alpha（透明度）通道

什么是颜色选择器？

颜色选择器（Color Picker）是一款在线工具，可以在不同颜色模型之间转换代码，并直观地选择所需颜色。在Web开发、UI/UX设计、图形设计等领域，准确的颜色代码至关重要。该工具支持HEX、RGB、HSL、HSV、OKLCH等主要颜色格式，通过直观的颜色滑块和调色板探索颜色，并可即时复制代码。还支持Alpha（透明度）通道，可处理半透明颜色。

  • HEX、RGB、HSL、HSV、OKLCH 5种颜色格式相互转换
  • 直观的颜色滑块和颜色区域选择
  • 支持Alpha（透明度）通道调节
  • 一键复制颜色代码
  • 随机颜色生成功能
  • 提供基础/高级调色板

使用方法

  1. 1

    选择颜色

    拖动颜色滑块或在颜色区域中点击选择所需颜色。也可以直接输入HEX代码等。

  2. 2

    确认格式

    选定的颜色会自动转换为HEX、RGB、HSL、HSV、OKLCH等所有格式并显示。

  3. 3

    调节透明度

    在Alpha标签中可以在0~100%范围内调节透明度，创建半透明颜色。

  4. 4

    复制代码

    点击所需颜色格式的值即可自动复制到剪贴板。可直接粘贴到CSS、设计工具等。

常见问题

HEX是#RRGGBB形式的十六进制表示，在CSS中最常用。RGB是红色（0-255）、绿色（0-255）、蓝色（0-255）的组合表示颜色。HSL用色相（Hue, 0-360）、饱和度（Saturation, 0-100%）、亮度（Lightness, 0-100%）表示，最符合人类直觉。

OKLCH是感知均匀（perceptually uniform）的最新CSS颜色空间。传统HSL中相同饱和度/亮度的颜色在不同色相下看起来亮度不一致，OKLCH解决了这个问题，有利于生成一致性的调色板。它已被纳入CSS Color Level 4标准。

Alpha值是0（完全透明）到1（完全不透明）之间的值，表示颜色的透明度。在CSS中使用如rgba(59, 130, 246, 0.5)，HEX中在后面添加2位如#3B82F680。常用于遮罩层、阴影、背景等。

根据WCAG 2.1指南，文本与背景之间的亮度对比度应达到普通文本4.5:1、大文本3:1以上。选择颜色时应确认与背景色的对比度，确保视障人士也能阅读。

将Figma、Sketch等设计工具中复制的HEX代码输入本工具，即可自动转换为RGB、HSL等CSS可用格式。使用CSS变量管理可以在更换主题时提高效率，HSL格式便于调节亮度/饱和度。

使用技巧

  • HSL格式只需调节亮度（L）就能轻松创建同一颜色的明暗变体，适合主题色设计工作
  • 使用随机颜色功能获得灵感后，再用颜色滑块微调可以创建富有创意的调色板
  • 配合CSS custom property（变量）使用，可以方便地切换暗色/亮色模式
  • 点击调色板中常用的颜色可以快速复制代码
  • 利用OKLCH格式可以设计在感知上饱和度和亮度一致的颜色系统

Omnilude Tools

为开发者、设计师、创作者提供的免费在线工具集。所有数据均在浏览器本地处理。

开发者工具

  • UUID生成器
  • 时间戳转换器
  • 编码器/解码器
  • 颜色选择器

文本工具

  • JSON编辑器
  • 文本比较
  • 文本计数器
  • Markdown

法律声明

  • 隐私政策
  • 服务条款
  • 服务介绍

© 2026 Omnilude. All rights reserved.

发送反馈