coolors.co website design: fonts, colors and UI patterns

Design character

Coolors is a color-first product UI wrapped in a bright SaaS marketing shell. The product experience is full-bleed vertical palette columns with overlaid hex/name labels; the marketing site is white canvas, oversized black display type, soft multi-color gradient wordmarks, and a dense grid of rounded pastel feature cards. Chrome stays quiet so the palette itself is the hero.

What should survive adaptation:

• Palette-as-interface: full-height color columns, not small swatches in a sidebar
• Near-black primary type (#0a0a0a) on white marketing surfaces; white type on saturated palette columns
• Soft 10–14px card radii and generous 40px card padding on marketing grids
• Multi-accent energy (green, purple, cyan, blue, pink) used as feature chips and CTAs—not a single brand primary
• Clean thin top bars with logo wordmark + utility icons, never heavy chrome

Foundations

Color

Measured roles across home and palette editor captures:

The palette *content* is intentionally unbounded—user colors fill the viewport (e.g. charcoal / steel / butter / lemon / coral columns). Marketing keeps a pure white field so those colors read as the product.

Typography

Declared font families were not captured. Observed scale (weight/size/line-height):

• Display / hero: ~110px weight 700, tight leading (~99px), negative tracking (~−3.85) — marketing claims
• Palette column type: ~15px regular for hex/name stacks; occasional ~30px labels with slight positive tracking
• Body / UI: 15–18px regular; ~24px for section titles; 12–13px for dense meta
• Color Bot and tool surfaces stay at a tight 15/15 system for control density

Use a clean geometric sans; keep display type very large and tightly tracked on marketing, and monoline utilitarian sizes inside tools.

Spacing and layout

• Marketing feature cards: 40px padding on all sides; large 14px corner radius (hundreds of instances)
• Section rhythm: 80–100px vertical padding and bottom margins between major blocks
• Horizontal content breathing: ~100px side padding on wide marketing sections; ~102px side margins on some card rows
• Tool chrome: 10px control padding; 4–7px icon gaps; 20px horizontal padding on toolbars
• Palette editor is edge-to-edge columns under a slim header—no content max-width cage

Visual language

• Shape: cards ~10–14px radius; smaller controls 4–8px; Color Bot chips ~8px
• Shadows: almost none—occasional 0-offset 1px spread “border shadow” instead of soft elevation
• Borders: minimal; separation comes from color blocks and white gutters
• Imagery: product is the image—live palettes, gradient logo fills, soft pastel illustration tiles on marketing
• Motion: not established from stills

Components and states

• Top bar: logo (gradient fill on “Coolors”), center tools (picker / image / create / export metaphors), right utilities (account, pro)
• Palette stage: 5 equal vertical strips; each shows hex, optional name, lock/copy affordances near bottom
• Marketing card grid: multi-column rounded tiles with soft tinted backgrounds, short titles, and small accent icons
• Hero: huge black headline with a multi-stop gradient on a key word (“palettes”)
• Color Bot: chat/tool panel with 15px dense type and small rounded chips
• Visible states beyond default (hover/focus/error) were not captured as distinct frames

Responsive behavior

Captures are mostly wide desktop viewports (~1630–1712px). A shorter home crop (~1380×361) still keeps the oversized display type. No mobile breakpoint system was measured—treat the full-bleed column palette and card grid as desktop-first.

Practical guidance

Preserve

• Full-bleed color columns as the core interaction surface
• White marketing canvas + multi-accent feature language
• Large, tight display type paired with quiet 15px UI type
• Soft 14px cards with roomy 40px padding
• Thin utility chrome that never competes with color

Avoid

• Boxing palettes into small swatch grids
• Heavy drop shadows or skeuomorphic toolbars
• A single rigid brand accent when the product sells color range
• Inventing a declared typeface stack—families were not recorded

Scope note

Studied Coolors home (/), two Create a Palette URLs with distinct five-color sets, and Color Bot (/color-bot) across eight captures. Declared font families were unavailable; color roles come from measured UI chrome, while palette column fills are content-driven.