Colorise ProOKLCH Engine
ExploreStudioNamesPickerPairs
ExploreStudioNamesPickerPairsContrastExtract
Menu

Product

  • Home
  • Explore
  • Studio
  • Color Names

Tools

  • Picker
  • Color Pairs
  • Contrast
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings

Guides

Color guides for design engineers

OKLCH와 HSL, WCAG와 APCA, 색 영역 매핑, 토큰 스케일, 이미지에서 팔레트 추출까지 다루는 실용 가이드. Colorise Pro 무료 도구와 연결되어 있습니다. Short, practical, and linked to the tools — so you can read once and ship.

  • Color science

    OKLCH vs HSL
    Why perceptual lightness beats HSL for product UI systems.
  • Accessibility

    WCAG vs APCA
    When compliance ratios are enough — and when Lc tells the truth.
  • Tokens

    OKLCH color scales
    Even 50–950 ramps: lightness steps, chroma, and names that ship.
  • Displays

    Gamut & sRGB
    Out-of-gamut OKLCH, clipping vs soft map, and display reality.
  • Workflow

    Extract from images
    From photo to tokens — cluster, pick, refine in Studio.
  • Conversion

    HEX to OKLCH
    The HEX → OKLCH formula, a worked example, and when CSS wants OKLCH.
  • Dark mode

    Dark mode colors
    Invert lightness, compensate chroma, keep contrast — in OKLCH.
  • Color psychology

    Color meanings
    What 13 colors symbolize, with hex codes, shades and palettes.

Prefer tools over reading? Open the picker, Studio, or Explore palettes.

Guides: the ideas behind the tools

What the guides cover

The tools on this site make decisions fast; the guides slow down and explain the reasoning. They cover the OKLCH color space and how it differs from HSL, the two contrast systems (WCAG ratios and APCA) and which one a given situation calls for, how to build tint and shade scales that stay even, what happens when a color falls outside the sRGB gamut, how to turn a photograph into a working palette, and what individual colors communicate.

A sensible reading path

New to OKLCH? Start with OKLCH vs HSL, then building OKLCH scales for the practical method. Working on accessibility: WCAG vs APCA first, then apply it in the contrast checker. Starting from a photo or a brand: the palette extraction guide and the color meaning series pair well with the extractor and names encyclopedia.

Related tools

  • OKLCH picker
  • Contrast
  • Studio
  • Color pairs
  • Explore
Colorise Pro

Free OKLCH color workspace: precision color picker, color pairs, WCAG & APCA contrast checker, palette from image, Studio systems, names, gradients, and brand tools. Export HEX, CSS, Tailwind & DTCG.

OKLCH Engine

Product

  • Home
  • Explore
  • Studio
  • Color Names
  • Color Codes

Tools

  • Color Picker
  • Color Pairs
  • Contrast Checker
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL
  • For presentations
  • For business cards
  • For SaaS landings
  • Duo pairs
  • Trio systems

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings

Legal

  • Privacy
  • Terms

© 2026 Colorise Pro. All rights reserved.

© 2026 Colorise Pro. Built for precision color work.

Report infringement: [email protected] (Colorise Pro)

PrivacyTermsOKLCH · WCAG · APCA