API màu miễn phí
Phân tích, chuyển đổi, kiểm tra độ tương phản, tạo thang màu và bảng màu, mô phỏng mù màu và xuất design token qua HTTP thông thường. Không cần key, không cần đăng ký, nhận và trả JSON.
- Không cần API key, không cần đăng ký
- GET với tham số query hoặc POST với JSON
- Đã bật CORS, gọi được từ mọi trang web
- Cùng phép tính với trang web: CSS Color 4
Endpoint
- Dùng thử: /api/v1/parse-color?color=oklch%2862%25+0.21+260%29
Describe a color
GET, POST /api/v1/parse-colorRead any color and describe it: HEX, RGB, HSL and OKLCH values, the closest human name, the closest Tailwind class, its hue family, whether it fits sRGB and Display P3, and which text color, white or black, reads better on it.
Body POST
curl -X POST https://pickshade.com/api/v1/parse-color \ -H 'Content-Type: application/json' \ -d '{"color":"oklch(62% 0.21 260)"}' - Dùng thử: /api/v1/convert-color?color=%23ff5733&formats=oklch%2Chsl%2Ccmyk
Convert a color
GET, POST /api/v1/convert-colorConvert a color between formats: hex, rgb, hsl, hsv, hwb, cmyk, lab, lch, oklab, oklch, display-p3, rec2020, xyz and platform code (swiftui, uikit, flutter, android). Values follow CSS Color 4.
Body POST
curl -X POST https://pickshade.com/api/v1/convert-color \ -H 'Content-Type: application/json' \ -d '{"color":"#ff5733","formats":["oklch","hsl","cmyk"]}' - Dùng thử: /api/v1/find-colors?query=sage&limit=5
Find colors by name
GET, POST /api/v1/find-colorsSearch color names by words, like "sage", "dusty rose", "midnight blue" or "бордовый", and get their HEX values. Searches common names in English and Russian and about 30 000 extended color names. Use it to turn a description into real colors.
Body POST
curl -X POST https://pickshade.com/api/v1/find-colors \ -H 'Content-Type: application/json' \ -d '{"query":"sage","limit":5}' - Dùng thử: /api/v1/check-contrast?text=%236b7280&background=%23ffffff
Check text contrast
GET, POST /api/v1/check-contrastCheck text contrast against a background with both WCAG 2 (ratio, AA and AAA for normal and large text) and APCA (Lc value and the usage level it allows). Also suggests the nearest text color that passes AA and AAA while keeping its hue.
Body POST
curl -X POST https://pickshade.com/api/v1/check-contrast \ -H 'Content-Type: application/json' \ -d '{"text":"#6b7280","background":"#ffffff"}' - Dùng thử: /api/v1/fix-contrast?text=%23f97316&background=%23ffffff&target=aa&adjust=text
Fix contrast
GET, POST /api/v1/fix-contrastFind the closest color that reaches a contrast target by changing only OKLCH lightness, so the hue and character stay. Targets: aa (4.5:1), aa-large (3:1), aaa (7:1), apca-body (Lc 75), apca-content (Lc 60), apca-large (Lc 45). Adjust the text color or the background.
Body POST
curl -X POST https://pickshade.com/api/v1/fix-contrast \ -H 'Content-Type: application/json' \ -d '{"text":"#f97316","background":"#ffffff","target":"aa","adjust":"text"}' - Dùng thử: /api/v1/audit-palette?colors=%230f172a%2C%23f8fafc%2C%232563eb%2C%23f97316%2C%2316a34a
Audit a palette for accessibility
GET, POST /api/v1/audit-paletteCheck every text and background pair in a palette with WCAG 2 and APCA, list which pairs are safe for body text, large text or only decoration, find colors that people with color blindness cannot tell apart, and flag colors outside sRGB. Use it before shipping a theme or chart palette.
Body POST
curl -X POST https://pickshade.com/api/v1/audit-palette \ -H 'Content-Type: application/json' \ -d '{"colors":["#0f172a","#f8fafc","#2563eb","#f97316","#16a34a"]}' - Dùng thử: /api/v1/check-gamut?color=oklch%2870%25+0.3+145%29
Check gamut
GET, POST /api/v1/check-gamutCheck whether a color fits the sRGB, Display P3 and Rec. 2020 gamuts, and get the closest sRGB fallback that keeps lightness and hue (CSS Color 4 gamut mapping in OKLCH).
Body POST
curl -X POST https://pickshade.com/api/v1/check-gamut \ -H 'Content-Type: application/json' \ -d '{"color":"oklch(70% 0.3 145)"}' - Dùng thử: /api/v1/nearest-names?color=%231e3a8a&limit=3
Find color names
GET, POST /api/v1/nearest-namesFind the closest named colors, CSS color keywords and Tailwind CSS classes for a color, ranked by perceptual distance (deltaE OK).
Body POST
curl -X POST https://pickshade.com/api/v1/nearest-names \ -H 'Content-Type: application/json' \ -d '{"color":"#1e3a8a","limit":3}' - Dùng thử: /api/v1/compare-colors?first=teal&second=turquoise
Compare two colors
GET, POST /api/v1/compare-colorsCompare two colors: CIEDE2000 and deltaE OK difference with a plain verdict (identical, nearly, similar, different, opposite), lightness shift in percent, chroma and hue shift, and the contrast between them.
Body POST
curl -X POST https://pickshade.com/api/v1/compare-colors \ -H 'Content-Type: application/json' \ -d '{"first":"teal","second":"turquoise"}' - Dùng thử: /api/v1/generate-scale?color=%233b82f6
Generate a 50–950 scale
GET, POST /api/v1/generate-scaleBuild an 11-step tint and shade scale (50, 100 … 900, 950) from one color in OKLCH, the same shape as Tailwind palettes, with even perceived lightness steps.
Body POST
curl -X POST https://pickshade.com/api/v1/generate-scale \ -H 'Content-Type: application/json' \ -d '{"color":"#3b82f6"}' - Dùng thử: /api/v1/tints-shades?color=%232563eb&steps=5
Tints, shades and tones
GET, POST /api/v1/tints-shadesGet tints (mixed with white), shades (mixed with black) and tones (mixed with gray) of a color, evenly spaced, as HEX. Good for hover states, borders and backgrounds.
Body POST
curl -X POST https://pickshade.com/api/v1/tints-shades \ -H 'Content-Type: application/json' \ -d '{"color":"#2563eb","steps":5}' - Dùng thử: /api/v1/harmonies?color=%23ff5733&kind=triadic
Color harmonies
GET, POST /api/v1/harmoniesGet color harmonies for a base color, computed in OKLCH so lightness stays even: complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic.
Body POST
curl -X POST https://pickshade.com/api/v1/harmonies \ -H 'Content-Type: application/json' \ -d '{"color":"#ff5733","kind":"triadic"}' - Dùng thử: /api/v1/mix-colors?first=%23ff5733&second=%233b82f6&amount=30&space=oklab
Mix two colors
GET, POST /api/v1/mix-colorsMix two colors at a ratio in a chosen color space, like CSS color-mix(). OKLab keeps the middle bright, sRGB tends to turn gray. Returns the result and a ready color-mix() expression.
Body POST
curl -X POST https://pickshade.com/api/v1/mix-colors \ -H 'Content-Type: application/json' \ -d '{"first":"#ff5733","second":"#3b82f6","amount":30,"space":"oklab"}' - Dùng thử: /api/v1/make-gradient?colors=%232563eb%2C%23f97316&kind=linear&angle=90&space=oklab
Make a CSS gradient
GET, POST /api/v1/make-gradientBuild a CSS gradient from 2 or more colors with interpolation in OKLab, OKLCH or sRGB. Returns modern CSS with the color space, a fallback with precomputed stops for older browsers, and the stop colors. OKLab avoids the gray middle that sRGB gradients get.
Body POST
curl -X POST https://pickshade.com/api/v1/make-gradient \ -H 'Content-Type: application/json' \ -d '{"colors":["#2563eb","#f97316"],"kind":"linear","angle":90,"space":"oklab"}' - Dùng thử: /api/v1/generate-palette?keep=%230f172a&mode=analogous&size=5&seed=brand
Generate a palette
GET, POST /api/v1/generate-paletteGenerate a harmonious palette in OKLCH. Keep colors you already have, pick a style (auto, analogous, complementary, triadic, monochromatic, pastel, vivid, muted, dark) and pass a seed to get the same palette every time.
Body POST
curl -X POST https://pickshade.com/api/v1/generate-palette \ -H 'Content-Type: application/json' \ -d '{"keep":["#0f172a"],"mode":"analogous","size":5,"seed":"brand"}' - Dùng thử: /api/v1/simulate-cvd?colors=%23e11d48%2C%2316a34a%2C%232563eb
Simulate color blindness
GET, POST /api/v1/simulate-cvdShow how colors look with protanopia, deuteranopia, tritanopia and achromatopsia (Machado 2009 at full severity), and list the pairs that become hard to tell apart.
Body POST
curl -X POST https://pickshade.com/api/v1/simulate-cvd \ -H 'Content-Type: application/json' \ -d '{"colors":["#e11d48","#16a34a","#2563eb"]}' Export colors as code
POST /api/v1/export-tokensTurn a list of colors into ready code: CSS custom properties, a Tailwind v4 @theme block, SCSS variables, JSON, W3C design tokens (DTCG), a JavaScript array or an SVG swatch strip. Unnamed colors get their closest color name.
Body POST
curl -X POST https://pickshade.com/api/v1/export-tokens \ -H 'Content-Type: application/json' \ -d '{"colors":[{"color":"#0f172a","name":"ink"},{"color":"#f97316"}],"format":"tailwind","values":"oklch"}'- Dùng thử: /api/v1/build-system?primary=%236d4aff&format=shadcn
Build a design system
GET, POST /api/v1/build-systemBuild a full color system from a brand color: 50–950 scales for primary, secondary, accent, neutral and status colors, light and dark theme roles, exported as a Tailwind v4 theme, CSS variables, shadcn/ui globals.css or DTCG tokens, with a contrast audit of text and surface pairs.
Body POST
curl -X POST https://pickshade.com/api/v1/build-system \ -H 'Content-Type: application/json' \ -d '{"primary":"#6d4aff","format":"shadcn"}'
Giới hạn
Mỗi địa chỉ IP có thể gửi khoảng 10 request mỗi giây, cho phép tăng vọt ngắn. Vượt mức đó, API trả về 429 kèm header Retry-After. Kết quả không bao giờ thay đổi được cache trong một ngày, nên các lần gọi lặp lại trả về tức thì.
Hỏi đáp
Có cần API key không?
Không. API miễn phí và mở. Bạn chỉ cần gọi các endpoint qua HTTPS từ máy chủ, script hoặc trình duyệt.
API nhận những định dạng màu nào?
Mọi màu CSS: HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() và color(display-p3 …), cùng tên màu CSS như navy, tên thông dụng như royal blue và class Tailwind như sky-500.
Lỗi được báo như thế nào?
Lỗi trả về dạng application/problem+json với title và detail cho biết cần sửa gì, ví dụ khi một chuỗi không đọc được thành màu.