颜色选择器Color Picker
颜色选择与格式转换(HEX/RGB/HSL)Color picker and format conversion (HEX/RGB/HSL).
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)调色板
色调渐变
常用颜色
关于 颜色选择器About Color Picker
UI 设计与前端开发中，取色与格式换算是高频操作。本工具提供可视化颜色选择器，实时互转 HEX、RGB、HSL 三种表示，并展示常见用法示例，帮你把“看到的颜色”准确写进代码。Picking colours and converting formats are daily tasks in UI design and frontend work. This tool offers a visual colour picker with real-time HEX, RGB and HSL conversion plus usage examples, turning "the colour I see" into exact code.
使用方法How to Use
- 在取色器上选择颜色，或直接输入色值。Pick a colour on the picker, or type a colour value directly.
- 页面实时展示该颜色的 HEX / RGB / HSL 表示。The page shows the colour in HEX, RGB and HSL in real time.
- 点击任意格式一键复制，粘贴到 CSS 或设计工具中。Click any format to copy it into CSS or design tools.
常见问题FAQ
HSL 比 RGB 好在哪里？What is HSL better at than RGB?
HSL 用色相/饱和度/明度描述颜色，更符合人类直觉：想“亮一点”“淡一点”时调整 L 和 S 即可，比改 RGB 三个数方便得多，也便于生成同色系配色。HSL describes colour by hue/saturation/lightness, matching human intuition: "lighter" or "softer" is a tweak of L and S instead of three RGB numbers, and it makes same-hue palettes easy.
如何表示半透明颜色？How do I express semi-transparent colours?
使用带透明度的写法：rgba(37, 99, 235, 0.5) 或 8 位 HEX（如 #2563eb80），末两位即透明度。Use alpha-aware forms: rgba(37, 99, 235, 0.5) or 8-digit HEX (e.g. #2563eb80), where the last two digits are the alpha.
如何获取现有网页上的颜色？How do I grab a colour from an existing web page?
用浏览器开发者工具的取色器或系统取色工具吸取颜色值，再粘贴到本工具换算成需要的格式。Use the browser devtools eyedropper or a system colour picker to capture the value, then paste it here to convert into the format you need.
相关阅读Related Reading
二进制与十六进制调试手册：位运算、掩码与颜色值的进制思维Binary and Hex Debugging Handbook: Bitwise Ops, Masks and Thinking in Bases for Colour Values
日志里打出 `0xFFFFFF00` 不是乱码，权限位 `0755` 不是十进制，颜色 `#FF8800` 也不是魔法字符串。本文用一线调试中的真实案例，讲清二进制、十六进制与位运算如何帮你快速定位问题。`0xFFFFFF00` in a log is not garbage, permission bits `0755` are not decimal, and colour `#FF8800` is not a magic string. This article uses real debugging cases to show how binary, hexadecimal and bitwise operations help you locate problems fast.
CSS box-shadow 从入门到拟物：多层阴影、内阴影与渲染性能CSS box-shadow From Basics to Skeuomorphism: Layered Shadows, Inset Shadows and Rendering Performance
`box-shadow` 是前端最常用的视觉工具之一，但五个参数的含义、多层叠加的技巧和性能陷阱并不总是被讲清楚。本文从语法拆解到拟物质感，再到什么时候该用图片代替阴影。`box-shadow` is one of the most-used visual tools in frontend, but the meaning of its five parameters, multi-layer stacking techniques and performance pitfalls are not always clearly explained. This article goes from syntax breakdown to skeuomorphic texture, and covers when to replace shadows with images.