Field Studio
Tune Energy and Tension to generate palette kits.
Energy + Tension
Advanced options
Let Energy/Tension drive the hue automatically
Explore the full color wheel with energy axis
Image Import
Extract colors
Drop an image or click to upload
Complete (full palette)
Presets
Popular moods
Palette Kit
Mood Field
Balanced / Clear
Energy 45Tension 35Hue 220
Sharp
Soft
Calm
Vivid
A
oklch(89% 0.196 181)
B
oklch(68% 0.154 259)
Accessibility & Color Blindness
Color Blindness Simulation
Text/Background Contrast Analysis
text / background
AA - 6.12:1
Sample Text
OKWCAG AA (4.5:1)
NOWCAG AAA (7:1)
OKAA Large (3:1)
text / surface
AA - 5.23:1
Sample Text
OKWCAG AA (4.5:1)
NOWCAG AAA (7:1)
OKAA Large (3:1)
muted / background
FAIL - 2.65:1
Sample Text
NOWCAG AA (4.5:1)
NOWCAG AAA (7:1)
NOAA Large (3:1)
Recommended Adjustments:
AA Compliant:
L: 53%
AAA Compliant:
L: 43%
muted / surface
FAIL - 2.27:1
Sample Text
NOWCAG AA (4.5:1)
NOWCAG AAA (7:1)
NOAA Large (3:1)
Recommended Adjustments:
AA Compliant:
L: 50%
AAA Compliant:
L: 39%
primary / background
FAIL - 2.05:1
Sample Text
NOWCAG AA (4.5:1)
NOWCAG AAA (7:1)
NOAA Large (3:1)
Recommended Adjustments:
AA Compliant:
L: 54%
AAA Compliant:
L: 44%
accent / background
FAIL - 2.04:1
Sample Text
NOWCAG AA (4.5:1)
NOWCAG AAA (7:1)
NOAA Large (3:1)
Recommended Adjustments:
AA Compliant:
L: 58%
AAA Compliant:
L: 46%
background / primary
FAIL - 2.05:1
Sample Text
NOWCAG AA (4.5:1)
NOWCAG AAA (7:1)
NOAA Large (3:1)
Recommended Adjustments:
AA Compliant:
L: 34%
AAA Compliant:
L: 20%
background / accent
FAIL - 2.04:1
Sample Text
NOWCAG AA (4.5:1)
NOWCAG AAA (7:1)
NOAA Large (3:1)
Recommended Adjustments:
AA Compliant:
L: 34%
AAA Compliant:
L: 20%
Hierarchy & Usage (6 colors)
Visual Proportion Guide
background
45% of visual space
Dominant color - Main backgrounds
Examples: Page backgrounds, App container, Primary surface
surface
20% of visual space
Secondary surface - Elevated elements
Examples: Cards, Panels, Modals, Dropdowns
primary
15% of visual space
Primary brand - Main actions
Examples: Primary buttons, CTAs, Active states, Brand elements
accent
10% of visual space
Accent highlights - Secondary actions
Examples: Secondary buttons, Links, Badges, Highlights
text
5% of visual space
Primary text - High contrast
Examples: Headings, Body text, Important labels
muted
5% of visual space
Muted text - Lower hierarchy
Examples: Secondary text, Captions, Placeholders, Disabled states
Palette Decisions
Fondos
Background
Surface
Accion
Primary
Accent
Pro
Texto
Text
Muted
Pro
Usage preview
Muted label
Interface sample
Primary actions use the main tone. Accent highlights secondary emphasis.
Unlock full kit previews and advanced exports with Pro.
Metrics
Chroma0.175
Hue diff78 deg
Lightness0.21
Vibration0.20
Energy fit65%
Tension fit32%
Unified score89%
Contrast Ratios (WCAG 2.1)
Light Mode
Text/Background:18.12:1
Text/Surface:16.10:1
Muted/Background:8.14:1
Accessibility
Pro unlocks advanced auto-fix for accent and muted roles.
Text on backgroundAAA18.14
Text on surfaceAAA16.12
Muted on backgroundAAA8.11
Primary text on primaryAAA9.02
Accent on backgroundAA5.94
Plan
Free
Saved 0/2
Export Dual Theme
No saved palettes yet.