COLOR, WITH PURPOSE
From a single brand color to practical web color schemes. Choose matching palettes, preview page effects, and export your design variables.
YOUR PALETTE
Color palette cards are preparing. Enable JavaScript to start using.
Click a color value to edit its HEX precisely, or a large swatch to copy it. The brand color stays fixed; other swatches can be locked.
Only the latest 50 steps are kept. Refreshing clears the history.
11 lightness steps for state and hierarchy
SEE IT IN CONTEXT
Organize projects, connect teams, and turn great ideas into next steps in a clean workspace.
From daily tasks to new breakthroughs, share progress with your team and focus energy on what truly matters.
Sample text and numbers are for previewing color schemes only. Switching modes will rearrange background, surface, and text colors; functional colors may differ from the original color cards.
DESIGN TOKENS
CONTRAST CHECK
Regular text ≥ 4.5:1, large text ≥ 3:1. Control boundaries relying on color recognition typically require ≥ 3:1; decorative lines are exempt. The report checks specified color pairs; full pages still require verification of font size, state, and background.
Click ratios in the matrix to compare foreground and background.
Contrast ratios between swatches help evaluate candidate combinations; suitability for body text, UI controls, or graphics depends on the specific use case.
READY FOR YOUR NEXT STEP
Export semantic role colors, accent color palettes, and primary color scales for the active theme mode.
After copying to your stylesheet, set background and text colors for the actual components, then verify hover, disabled, and focus states.
Color schemes are not uploaded or saved by default. Use palette links or download files to keep your results. Press space in empty workbench space to switch sets; lock color cards to retain them. This page contains site ads.
Connect this step to your goal
After using this tool, continue with relevant steps. Checklist marks are your own notes, not a passed test or business approval.
See all business goalsAI steps have shared usage limits and human verification. They run only when you submit, and do not automatically receive inputs or reports from previous steps.
YOUR NEXT STEP
Use image and document features under their stated free limits. Create a company account for website monitoring, business inquiries and team notifications, or discuss your workflow with us.
New companies receive a 14-day Pro trial, with no card required. Trials exclude the paid monthly credit grant.
Already have an account? Open your workspace →Selecting a brand color is easy, but applying it on web pages requires more judgment. Buttons must stand out, body text must be clear, and cards need visual hierarchy; the effect of the same color changes when placed on light versus dark backgrounds. This web color palette tool brings primary colors, matching palettes, continuous ramps, and live page samples into a single workbench, helping store operators, product managers, designers, and developers discuss viable solutions together.
A nice set of color swatches does not mean all colors are suitable for body text or buttons. The workbench builds roles for background, surface, body, secondary text, primary button, accent, and borders from primary and secondary colors, and selects text colors for buttons. Light mode requires clear text contrast, while dark mode needs to distinguish backgrounds from cards; the two cannot be solved by simple color inversion alone.
If the primary color is very light, it can remain in the brand palette while paired with a more suitable text color for buttons. Accent colors are best used sparingly; large background areas usually require lower saturation. The tool provides a comparable starting point, while final layout, imagery, and content density remain up to you.
The 11-step color scale here is labeled from 50, 100, 200 to 950, showing lightness changes from light to dark. OKLCH separates lightness from chroma and hue, making it ideal for finding candidates for light backgrounds, selected states, hover states, and dark text. Candidates outside the sRGB gamut will have their chroma reduced before mapping and converting to HEX.
Shade step numbers indicate relative position within the shade scale; they do not imply that your brand's primary color must reside at 500. Bright yellow, deep blue, and light pink have different input lightness levels, but the primary color remains intact in the primary swatch. Exported functional colors and shade steps should be selected based on actual components and fine-tuned within your project.
Contrast ratio reports calculate relative luminance between opaque sRGB foreground and background colors. Regular text requires a 4.5:1 ratio for AA compliance; large text (at least 18pt regular or 14pt bold) requires 3:1. Control boundaries and meaningful graphics used for identification typically require 3:1, but decorative dividers vary. Passing a single color pair does not mean the entire web page meets WCAG compliance.
Transparent overlays, gradients, and product images will alter the actual background; hover, focus, error alerts, and disabled states also need to be inspected separately. Content cannot rely on color alone—for example, errors should also feature clear text. After putting exported palettes into live pages, keyboard operations, font sizes, and states should be evaluated together, not just this palette report.
Ops team can select candidates around the brand primary color; product team can compare buttons and info hierarchy on web mockups; design team can lock favorite cards for exploration; dev team can export CSS variables and JSON. Share links reload color and UI settings, minimizing color discrepancies in screenshots.
This tool handles only colors and mockups. It makes no automated judgments on brand positioning, conversion rates, or industry psychology, nor does it generate unverified claims under the guise of AI. Giving the same color palette clear usage guidelines and verifiable contrast ratios is the actionable deliverable you can directly apply next.
Select or enter a primary brand color, then choose adjacent, complementary, split-complementary, triadic, or monochromatic schemes. The tool retains your input primary color, generates remaining matching colors in OKLCH color space, and provides light and dark web previews, functional colors, and contrast checks. Color relationships provide a design starting point; final choices should still consider brand, imagery, and actual pages.
Both the primary color and each swatch's precise editor accept #RGB and #RRGGBB, such as #63F or #635BFF, and normalize them to six-digit HEX. Click the value below a swatch to paste a color, compare it with the original and apply it. Transparency, color names and other input color spaces are not supported. You can still copy swatches as HEX, RGB or OKLCH; CSS exports use HEX.
The Undo and Redo buttons above the swatches restore colors, locks, harmony, style and website preview settings. Outside text fields, use Ctrl / ⌘ + Z to undo and Ctrl / ⌘ + Shift + Z to redo; Windows also supports Ctrl + Y. Text fields keep the browser's native text undo. Only the latest 50 steps are kept on this page, and refreshing clears them. To keep a palette longer, copy its share link or download a file.
OKLCH describes color using lightness, chroma, and hue, making it generally better suited for generating visually uniform color scales than directly adjusting HSL lightness. When converting to web-standard sRGB, some colors fall outside the displayable gamut; the tool reduces chroma to map them into sRGB. Displays may still vary across different screens, ambient light, and browsers.
Analogous colors use hues near the primary color, suitable for cohesive visuals. Complementary colors introduce opposing hues to highlight key points. Split-complementary looks adjacent to the complementary hue to maintain distinction. Triadic colors form three distinct hue groups across the color wheel to help differentiate modules. Monochromatic adjusts lightness and chroma around the primary color so hierarchy stands out more than hue. These are not deterministic rules for industry or brand psychology.
Not necessarily. 50–950 are design shade tags representing gradual lightness changes; 500 is not an appropriate lightness for all inputs. Your input primary color is fully preserved in the main swatch, while shades are used to find candidates for backgrounds, borders, and hover states. Please choose based on actual usage and contrast requirements.
Click the lock button on a color card to fix it. When switching combinations, styles, or clicking "Shuffle", the remaining unlocked color cards will continue to change. You can edit a color card individually or set it as the new primary color. Click "Unlock All" to unlock all color cards, or "Reset" to restore default color schemes and settings.
No. The report only evaluates the relative luminance contrast of listed opaque foreground and background colors. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text; UI control boundaries and graphics requiring color identification typically require 3:1. Large text refers to at least 18pt regular or 14pt bold text. Transparency, gradients, background images, hover/focus states, font sizes, and other accessibility rules must be audited separately on actual pages; decorative dividers do not uniformly require 3:1.
Dark web pages require rearranging the hierarchy of background, surface, body text, and accent colors. The tool generates functional colors based on the selected mode and chooses appropriate text colors for primary buttons, while primary color palettes still retain your input. Different templates showcase the same set of functional colors for easy comparison of real effects in SaaS, product showcase, and B2B pages.
Color calculations are completed locally in your browser without submitting colors to this site or saving schemes to local storage by default. You can download CSS or JSON before closing the page. Copied palette links include colors and UI settings for reopening or sharing with colleagues; please do not include personal or client information in links. The page contains site ads, which use their own network services.
CSS export includes color palettes, an 11-step primary color scale, and semantic variables for current light/dark modes as a starting point for web styles. JSON is ideal for saving color schemes and settings for designer or developer review. Copying styles does not automatically guarantee accessibility compliance; please verify against actual content and component states.
Calculation & Color References:WCAG 2.2 Text Contrast Notes、Non-text contrast detailsand CSS Color 4 OKLab / OKLCH. This tool maps to the sRGB color space by reducing chroma and does not claim to reproduce all browser color mapping algorithms.
A website palette extends a primary color into background, text, accent and state roles to create hierarchy and readable components.
Design and product teams choosing colors for a brand, website or landing page.
Enter a primary color, compare palettes and interface previews, check text contrast, then copy colors or design variables.
Inspect real light/dark previews, including buttons, body text and status colors. Preserving the brand color may require different text and border colors on different surfaces.
Palettes, scales, contrast and previews are generated in your browser. Copying, export and sharing a palette link are deliberate actions.
