Build analogous, complementary, triadic and monochrome palettes from a base colour, check contrast ratios and export CSS variables.
从一个主色生成邻近色、互补色、三分色与单色渐变方案，检测与白色的对比度，导出 CSS 变量。
A palette builder that starts from one colour and derives a usable scheme. Choose analogous, complementary, triadic, split-complementary or monochrome, set how many swatches you need, and the tool produces the hex values with a WCAG-style contrast ratio against white for each one — so you can immediately see which swatches are safe for text and which are decoration only. The result exports as CSS custom properties.
一个从一个主色推导出一整套可用配色的方案生成器。选择邻近色、互补色、三分色、分裂互补或单色渐变，设定需要的颜色数量，工具给出十六进制色值，并按 WCAG 规则算出每个色块与白色的对比度——一眼就能看出哪些色块适合放文字、哪些只能做装饰。结果可直接导出为 CSS 变量。
It is the WCAG relative-luminance ratio between the swatch and white, from 1 (identical) to 21 (black on white). Text needs at least 4.5:1, large text 3:1.
这是色块与白色之间的 WCAG 相对亮度比，取值 1（完全相同）到 21（黑底白字）。正文文字至少要 4.5:1，大字 3:1。
Analogous for calm, single-brand interfaces; complementary when you need a strong accent that still feels related; monochrome when you need depth in one hue.
界面克制用邻近色；需要强强调色但仍协调用互补色；单色渐变适合在一个色相里做层次。
No — the ratio is shown so you can judge. A light swatch may be perfect as a background and unusable as text; that is exactly what the readout is for.
不一定，所以才把比值显示出来让你判断。浅色块可能很适合做背景、却完全不适合当文字——这正是读数的用途。
Press Copy CSS variables to get a :root block with --brand-1 … --brand-n, or download a PNG strip to drop into a design mock-up.
点"复制 CSS 变量"得到带 --brand-1 … --brand-n 的 :root 代码块；也可以下载 PNG 色条贴进设计稿。
Write Mermaid text and render flowcharts, sequence diagrams, Gan…
写 Mermaid 文本即可渲染流程图、时序图、甘特图、思维导图与 ER 图，可…
Paste CSV or JSON and get a bar, line, pie, doughnut, radar or s…
粘贴 CSV 或 JSON 数据，生成柱状图、折线图、饼图、雷达图与散点图，可下…
Render LaTeX maths with KaTeX, copy the source, and start from r…
用 KaTeX 渲染 LaTeX 数学公式，复制源码，并提供常用公式模板一键套用…