Color Picker
Pick any color and see it in HEX, RGB, HSL and CMYK. Generate Tailwind shades 50–950 and copy with one click.
Try itLoading...
Loading...
Everything in one place
From the first swatch to the final stylesheet, Coloroski covers picking, generating, testing and exporting color — all in the browser, all for free.
Pick any color and see it in HEX, RGB, HSL and CMYK. Generate Tailwind shades 50–950 and copy with one click.
Try itBuild palettes with six harmony algorithms: complementary, triadic, analogous, split-complementary, tetradic and monochromatic.
Try itOne brand color in, a complete light + dark token set out — background, text, primary, status — every pairing contrast-checked.
Try itColorblind-safe categorical sets plus sequential and diverging ramps, exported for matplotlib, seaborn, ggplot2, Plotly, D3 and more.
Try itCheck contrast ratios against WCAG 2.1 AA and AAA for normal and large text. Get automatic accessible color suggestions.
Try itUpload a photo and extract its dominant colors with K-means clustering. Choose 4–16 colors and grab the HEX codes.
Try itDesign linear, radial and conic gradients with live preview. Tune stops and angles, then copy production-ready CSS.
Try itPreview your palette as seen with protanopia, deuteranopia, tritanopia and achromatopsia to design inclusively.
Try itExplore color relationships on an interactive wheel with plain-language color theory for every harmony type.
Try itBrowse 800+ curated palettes and community creations. Search by name, style or color, save favorites and export in one click.
Try itHow it works
Pick a color, paste a HEX code, or upload an image and let the extractor find the dominant colors for you.
Turn it into a full palette with color theory, then tweak hue, saturation and lightness until it feels right.
Run the WCAG contrast checker and color blindness simulator so your design works for every viewer.
Copy CSS variables, a Tailwind config, SCSS variables or JSON straight into your project.
Seventeen export formats — from CSS variables and Tailwind v4 to SwiftUI, Flutter and W3C design tokens. Individual colors copy as HEX, RGB, HSL or CMYK.
Built for
Build brand palettes, check contrast before handoff, and keep every screen on the same color system.
Get Tailwind shades and CSS variables without leaving the browser. Paste the output and ship.
Verify WCAG 2.1 AA/AAA compliance and preview how colors look with common forms of color vision deficiency.
Pull a palette from a photo or product shot to keep social posts, slides and thumbnails on brand.
FAQ
Yes. Every tool on Coloroski — the color picker, palette generator, WCAG contrast checker, color blindness simulator, gradient generator and image color extractor — is free and works without an account. Signing up adds saved palettes synced across devices and the AI features: palette generation from a description, brand-brief color suggestions, naming, and audit explanations.
Open the Image to Palette tool, upload a photo, and choose how many colors you want (4 to 16). Coloroski uses K-means clustering to find the dominant colors and returns their HEX codes, ready to copy or export.
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA raises that to 7:1 and 4.5:1. The contrast checker shows your ratio and pass/fail status for every level instantly.
Seventeen formats: CSS custom properties, Tailwind v3 and v4, SCSS, LESS, CSS with OKLCH, W3C design tokens, Figma tokens, SwiftUI, Jetpack Compose, Flutter, Android XML, JSON, CSV, SVG and PNG. Individual colors copy as HEX, RGB, HSL or CMYK.
Complementary, triadic, analogous, split-complementary, tetradic and monochromatic. The Color Harmony Wheel explains each one visually so you can pick the right scheme for your project.
The simulator covers protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind) and achromatopsia (total color blindness), so you can confirm your palette stays distinguishable for everyone.