Design Atlas

← Atlas

Color ​

Colour tools for interfaces: OKLCH pickers, palette and token generators, contrast checkers and references for dark-first design.

Start here ​

  • Ramps — one brand hex becomes eight OKLCH ramps and light/dark semantic tokens with enforced AA or AAA contrast; MIT, with llms.txt and a keyless JSON API.
  • Huetone (stale) — an LCH/OKLCH grid editor for lining up tone steps across hues, with WCAG 2 and APCA readouts on every swatch.
  • OKLCH — Evil Martians' picker and converter with sRGB, P3 and Rec. 2020 gamut edges and a computed sRGB fallback.
  • Color.review — the fastest visual check for one text and background pair, with pass/fail lines drawn on the picker.

All sources ​

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • Adobe SpectrumAdobe's Spectrum design system pairs visual foundations, components and patterns with separate open-source implementations.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Anthropic SkillsAnthropic's frontend-design anti-default skill plus canvas-design, theme-factory and brand-guidelines, all Apache-2.0.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Apple Human Interface GuidelinesApple platform UI reference with concrete examples for color, navigation, controls and adaptive interface states.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • AtmosOKLCH palette workspace with shade, gamut and contrast tools for building UI color systems.Verdict Very usefulConditional licence, proprietary paidAgent channels noneReviewed
  • Business Cards on the Web — STstudioA poster and web workshop case pairs a black portfolio interface, electric blue linework and an acid-green poster with engraved coin imagery.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Coca-Cola Visual SystemCoca-Cola’s 2026 identity announcement and embedded film show how its signature assets extend across packaging, retail and digital work.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Color.reviewWCAG 2.1 contrast checker with pass/fail lines on the picker and shareable pair links.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • CoolorsPalette generator and visualizer for trying color sets on UI, branding, typography and pattern mockups.Verdict Very usefulConditional licence, proprietary paidAgent channels noneReviewed
  • CosmosAd-free mood-board platform with hex-colour and visual-similarity search, AI-image filtering and source captions; Premium $8/month.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • daisyUIMIT Tailwind plugin of semantic component classes and 35 themes; llms.txt doubles as a skill, paid Blueprint MCP.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, skillReviewed
  • Dark Mode DesignAbout 380 dark-by-default websites, hand-picked since 2020; plain paginated grid, no filters.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Design DNATurns references into a three-part JSON profile (tokens, style, WebGL effects), with measured colours and a ΔE verify loop.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • Design MinisDirectory of small design tools filtered by category and price, including effects, backgrounds, motion, type and image editors.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • DesignspirationImage archive since 2010 with a five-colour palette on every save, colour search and Pro mood boards at $5/month.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Dither GardenBrowser dithering studio with classic diffusion, ordered and noise-based patterns, plus text export.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Dither Me ThisBrowser image dithering tool with retro palette presets and controls for diffusion, ordered and random patterns.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • DitherlandBrowser editor for dithering images and video, plus an animated generator with pixel, palette and tone-curve controls.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Duolingo Art StyleDuolingo’s illustrated guide to readable vector shapes, expressive characters, negative space and playful visual storytelling.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • extract-design-systemPulls colours, fonts, spacing, radii and shadows from a public URL into starter tokens.json and tokens.css, with a CI audit.Verdict UsefulShip licence, open source permissiveAgent channels mcp, cli, skillReviewed
  • FffuelAbout 65 free SVG generators for grainy gradients, blobs, noise and patterns, plus simple palette tools.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Gradient SpinA tiny React grid spinner swept by an OKLab-blended gradient wave, in four patterns.Verdict NicheShip licence, open source permissiveAgent channels noneReviewed
  • GrainientA curated library of smooth, grainy and animated gradients, plus a live shader editor for custom backgrounds.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • Halftone MakerBrowser studio for vector halftone and stipple images, with shape, grid, colour and sampling controls.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • HuemintPalette generator that previews generated colors in brand, website, gradient and illustration templates.Verdict UsefulLook only licence, not statedAgent channels apiReviewed
  • Huetone (stale)LCH/OKLCH palette editor that lines up tone steps across hues, with WCAG and APCA readouts.Verdict UsefulStaleShip licence, open source permissiveAgent channels noneReviewed
  • IBM Design Language colorIBM's color reference shows palette families, accepted gradients, UI themes, accessibility rules and examples in use.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Icon MuseumA hand-picked archive of 245 crafted iOS app icons with copyable palettes, designer credits and redesign history.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Jakub Krehel's skillsEleven modular skills that review with evidence and polish UI, typography, colour, layout, accessibility and copy.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Luzhniki identity — Art. Lebedev StudioA Moscow sports and park identity uses custom arc forms, a broad blue palette and a flexible frame across signs, posters and merchandise.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • MagicPatternA toolbox of live pattern, mesh-gradient, shader and background editors with image and code exports.Verdict UsefulConditional licence, mixedAgent channels apiReviewed
  • Material Design 3Google's component and color system with role-based schemes, adaptive UI examples and expressive component patterns.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • McCafé Visual Identity RefreshMcCafé’s 2026 refresh in packaging and storefront signage, pairing a script wordmark with gold, coffee-cherry tones and colorful drink photography.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Noise & GradientA p5.js canvas generator for textured color gradients with editable palettes, chaos and grain controls.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • OKLCHEvil Martians' OKLCH picker and converter with P3/Rec. 2020 gamut views and sRGB fallbacks.Verdict Very usefulShip licence, open source permissiveAgent channels noneReviewed
  • OnePromptDesignDark editorial prompt gallery with image examples, searchable categories and editable color palettes for visual exploration.Verdict NicheLook only licence, not statedAgent channels promptsReviewed
  • RadixWorkOS-maintained primitives, Themes, 15px icons and the 12-step Radix Colors system.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • RampsOne brand hex becomes OKLCH ramps and light/dark semantic tokens with enforced AA/AAA, via llms.txt and a JSON API.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, api, promptsReviewed
  • Realtime ColorsColor and type visualizer that applies palette choices to a full responsive website-like sample.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Regene Office — NOSIGNERNOSIGNER presents a Yokohama office built around reused construction materials through dark, full-width photography and a clear project narrative.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • SephiroA React and Preact component catalogue that pairs live state examples with six built-in themes and a compact token system.Verdict UsefulConditional licence, source availableAgent channels noneReviewed
  • Shadcn StudioThemeSelection's shadcn suite: blocks, templates, theme generator, Figma kit and an MCP; strict site licence.Verdict UsefulConditional licence, mixedAgent channels mcp, llms-txt, registryReviewed
  • Spotify Design HistorySpotify’s 20-year retrospective pairs archived app screens and logos with current identity details such as green, dark interfaces and Spotify Mix.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Spotify Wrapped 2021Spotify’s 2021 Wrapped interview explains a campaign-specific ribbon, symbols, motion and digital applications through contemporary examples.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Starbucks Holiday Ad (2024)A stop-motion holiday film that places Starbucks green, the Siren and red seasonal details inside densely staged miniature scenes.Verdict NicheConditional licence, proprietary freeAgent channels noneReviewed
  • StyleSeed23-skill engine that locks decisions in STYLESEED.md, builds OKLCH palettes from one colour, and scores UI to 80 or above.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • U.S. Web Design SystemFederal design system with live component previews, configurable tokens and restrained, accessible page patterns.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Vector Halftone MakerLightweight browser tool for turning an image into configurable dot grids, pixel-like shapes and PNG or SVG exports.Verdict NicheConditional licence, proprietary freeAgent channels noneReviewed

Patterns worth reusing ​

  • Line up the same tone step across every hue so a "blue 600" and a "red 600" pass the same checks, and contrast rules can be written once per step (Huetone).
  • Plot lightness, chroma and hue along each ramp so an uneven scale shows up as a bumpy line, and test in greyscale that hierarchy survives without hue (Huetone).
  • Enforce contrast while generating tokens, and report the measured ratio on every token so the claim can be checked (Ramps).
  • Resolve semantic tokens per mode instead of mapping dark mode by hand, and pair each fill with its text-on-* token (Ramps).
  • Pair every wide-gamut colour with a computed sRGB fallback, not a hand-picked one (OKLCH).
  • Draw pass/fail boundaries on the picker itself so people see how far a failing colour has to move (Color.review).
  • Keep a tool's state in the URL so a colour, a pair or a whole palette can be linked from a PR or design note (OKLCH, Color.review, Ramps).
  • Serve the same palette as HTML for people and as plain text or JSON for agents, so they fetch real values instead of inventing hex codes (Ramps).
  • For a dark palette, measure a few reference sites (background shade, text colour, number of accents) and hand the agent those values rather than a vague mood (Dark Mode Design).

Pitfalls ​

  • Most colour tools have no API, MCP or llms.txt (Huetone, OKLCH, Color.review, Fffuel); Ramps is the exception. Usually the handoff is the exported CSS variables or token JSON.
  • Treat WCAG 2 as the compliance bar. Huetone's APCA readout uses a working-draft algorithm that may change, and Ramps and Color.review measure WCAG 2.1 only.
  • High-chroma OKLCH values can fall outside sRGB; always ship the fallback or gate the colour with @media (color-gamut: p3) (OKLCH).
  • Generated ramps follow a fixed lightness curve, so hand-tuned brands still need edits. In Ramps, text-disabled sits below the minimum on purpose and the light-mode raised surface matches the base, so separate it with a shadow.
  • Huetone keeps palettes in local storage and hasn't been updated since November 2023; export or copy a link before clearing site data.
  • Fffuel lets you use generated images commercially but not redistribute them, so they can't go into templates or asset kits you ship.
  • A reference site that looks readable isn't proof of contrast; check dark palettes against WCAG (Dark Mode Design). Color.review publishes no terms or privacy page and loads Google Analytics.