Color guides and practical tutorials.
Learn how color systems work, follow practical workflows, understand accessibility and print limitations, and move each result into a free Color Pick tool.
Start with the foundations.
Three practical entry points cover palette creation, accessibility, and perceptual web color.
How to Create a Color Palette That Actually Works
Build a balanced, accessible, and reusable color palette with clear roles, practical testing, and a worked example.
Read guide 02AccessibilityColor Contrast Ratio: A Practical WCAG Guide
Understand WCAG contrast ratios, AA and AAA targets, UI boundaries, worked examples, and a practical testing workflow.
Read guide 03Web and UIOKLCH for Web Design: A Practical Guide
Use OKLCH lightness, chroma, and hue to build consistent web palettes, scales, themes, and sRGB fallbacks.
Read guideFind the workflow you need.
Search by topic or filter the directory. Every guide includes a direct answer, worked example, limitations, references, and links to relevant tools.
Build a balanced, accessible, and reusable color palette with clear roles, practical testing, and a worked example.
Open Color Playground02AccessibilityColor Contrast Ratio: A Practical WCAG GuideUnderstand WCAG contrast ratios, AA and AAA targets, UI boundaries, worked examples, and a practical testing workflow.
Open Contrast Checker03Color BasicsHEX, RGB, HSL, OKLCH, and CMYK ExplainedCompare HEX, RGB, HSL, OKLCH, Display P3, alpha, and CMYK planning values with practical use cases and limitations.
Open Color Converter04Print and CPSRGB vs CMYK: Choosing Colors for Screen and PrintChoose the right screen and print workflow, understand gamut differences, ICC profiles, soft proofing, and practical handoff.
Open CMYK and Print Lab05TutorialsHow to Extract a Color Palette from an ImageExtract, refine, test, and reuse a practical color palette from a photo or screenshot while keeping processing local.
Open Image Color Picker06Web and UIHow to Generate a Tailwind Color ScaleBuild a perceptually balanced Tailwind 50–950 color scale with semantic tokens, accessible states, and export examples.
Open Tailwind Generator07AccessibilityHow to Build an Accessible Color PaletteCreate an accessible palette with contrast, non-color cues, semantic states, focus visibility, and realistic component testing.
Run Palette Readiness08Web and UIHow to Design Colors for Dark ModeDesign layered dark surfaces, readable text, controlled chroma, accessible states, and theme-ready semantic tokens.
Open Context Preview09Web and UIOKLCH for Web Design: A Practical GuideUse OKLCH lightness, chroma, and hue to build consistent web palettes, scales, themes, and sRGB fallbacks.
Open Color Converter10Print and CPSSpot Color vs Process ColorCompare spot colors and CMYK process colors, understand production trade-offs, proofing, and independent CPS planning references.
Open Spot Color Lab11Color BasicsWhat Is CIEDE2000 Color Difference?Understand Delta E 2000, Lab-based color comparison, practical interpretation, tolerances, and Color Pick CPS matching.
Match a Color12Print and CPSUnderstanding the Color Pick Color SystemUnderstand CPS numeric codes, 1,386 independent references, families, tones, intensities, matching, exports, and limitations.
Explore CPSBuilt for people first, retrieval second.
Each guide uses clear definitions, explicit assumptions, practical steps, visible limitations, and primary references. Important answers remain readable in static HTML and do not depend on hidden tool state.