Accessible Nature Color Palettes & Live WCAG Contrast Checker
A colour palette is a set of colours chosen to work together. This library curates nature-inspired palettes for web and UI design, computes the real WCAG 2.1 contrast ratio of every swatch against white and black text, and lets you copy the whole set as CSS variables or a Tailwind config.
Every ratio below is calculated in your browser using the true relative-luminance formula, not estimated. Nothing is uploaded, there are no third-party scripts, and the contrast checker works offline once the page has loaded.
Seasonal nature palettes
Every ratio below is calculated in your browser using the WCAG 2.1 relative luminance formula, for normal-size text (16px). The collection spans curated seasonal sets and palettes pulled from real landscape photography.
Contrast checker
Pick any foreground and background color and get an instant WCAG 2.1 pass/fail reading.
Built for people who ship real interfaces
Every palette here is meant to be used, not just looked at.
Nature-grounded curation
Each palette is drawn from a real seasonal mood or a real photograph, not a random hue wheel spin.
Live WCAG math
Contrast ratios are computed in your browser using the true relative-luminance formula.
Export to CSS or Tailwind
Copy a palette straight into a :root block or a Tailwind color config, ready to paste.
Save favorites
Star the palettes you reach for often and filter down to just those in one click.
Hybrid generator
Cross-pollinate a brand-new palette from the curated collection and save it if it sticks.
Full color specimens
Click any swatch to see its HEX, RGB, and HSL values plus contrast against black and white.
From swatch to shipped interface
Browse or filter palettes
Use the search box or click the tag chips (winter, spring, coastal, moody) to narrow the list. You can also filter down to just your saved favorites.
Click a swatch to inspect it
Every swatch opens a detail panel showing HEX, RGB, HSL, plus contrast against both white and black — so you know instantly if it works as text or background.
Open the contrast details
Inside each card, the Show contrast details panel lists every color's ratio against white and black text with AAA/AA/Fail labels for normal body text.
Export to CSS, Tailwind, SCSS, or JSON
Use the export buttons to copy the palette as CSS custom properties, a Tailwind v3 color config, SCSS variables, or JSON — whatever fits your codebase.
Generate a hybrid palette
Click Generate in the banner to cross-pollinate one color from five random palettes. If it works, save it to your collection; if not, just click again.
What Makes a Palette Actually Work
Most palettes fail for the same four reasons, and none of them are about whether the colours look nice.
- Contrast is a requirement, not an aesthetic. If your accent colour cannot pass 4.5:1 against the background, it cannot be used for body text. It can still be used as a button background with white text, or as a decorative accent — but not for reading.
- One dominant, one accent, one neutral. A five-colour palette is not five colours used equally. It is one surface colour, one text colour, one accent for interactive elements, and two support tones for states like hover and disabled.
- Test on the darkest and lightest backgrounds. A palette that works on white often fails on a dark surface. Check each colour against both — the tool above does this automatically for every swatch.
- Warm and cool tones need different text pairings. Cool mid-tone blues and teals tend to carry white text well; warm yellows and oranges usually need black or dark-brown text. The AAA/AA/Fail badges on each card show you which is which.
If a palette looks good but fails every contrast check, it is a mood board, not a colour system. If it passes and looks good, ship it.
How It Works Under the Hood
The contrast checker is about 40 lines of JavaScript. No library is needed, and no server is involved.
- Hex to RGB. Each 6-character hex code is parsed into three 0–255 channel values by taking two characters at a time and converting them from base 16.
- sRGB linearisation. Each channel is divided by 255 and passed through the WCAG transfer function: channels above 0.04045 are raised to the power of 2.4 after a small offset, channels below are divided by 12.92. This approximates the human eye's non-linear response to light.
- Relative luminance. The three linear channels are weighted
0.2126 red + 0.7152 green + 0.0722 blue— the coefficients come from the CIE 1931 colour space and reflect how sensitive the eye is to each primary. - Contrast ratio. The two luminances are plugged into
(L1 + 0.05) / (L2 + 0.05), with L1 the lighter of the two. The result runs from 1:1 (identical) to 21:1 (black on white). - WCAG thresholds. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. The badges on every card follow those cut-offs exactly.
Every palette on this page loads as static data in the HTML. The page has no external stylesheets, no font CDNs, and no tracking pixels. The only third-party script is Google Analytics, gated behind the consent banner.
Common questions
What is a contrast ratio and why does it matter?
It measures the luminance difference between two colors. Higher ratios mean text is easier to read, which is why WCAG sets minimum thresholds for accessible design — 4.5:1 for normal text and 3:1 for large text under the AA level.
Are these palettes based on real WCAG formulas?
Yes. Every ratio shown is computed live using the WCAG 2.1 relative luminance formula, not a static estimate. If you copy a palette today, the ratios you saw are what a browser will honor.
Where do the photo-inspired palettes come from?
They're color sets pulled from real landscape and nature photography hosted on Unsplash. Each is credited to its photographer directly on the card with links back to their profile and the original photo.
Can I create my own palette?
Yes. Use the hybrid generator to cross-pollinate a new palette from the curated sets, then save it to keep it in your list. Saved palettes persist in your browser's local storage.
How do I use the exported CSS variables?
Copy the snippet and paste it into your stylesheet's :root block, then reference each variable anywhere you'd use a color value — for example color: var(--winter-frost-3);.
Can I export to Tailwind CSS?
Yes. Click the "Tailwind" button on any card to copy a ready-to-paste colors: { ... } object formatted for Tailwind v3's theme.extend configuration.
Which palettes are WCAG AA compliant?
Open the "Show contrast details" panel on each card to see every swatch's exact ratio against white and black. Anything marked AA or AAA is safe for text on that background.
Is this tool free to use?
Yes. Every feature is free with no account required, and all data stays in your browser. Google Analytics is loaded only after you accept cookies in the consent panel.
Can I use these palettes in commercial projects?
Yes. HEX values are numeric color coordinates in the public sRGB spectrum and cannot be copyrighted. You may use any palette commercially without attribution.
Does this tool work offline?
Once the page has loaded, palette browsing, the contrast checker, hybrid generation, and export all work without an internet connection. Only Google Analytics needs connectivity and it is gated behind consent.
Khalil built SkillsInsider after years of hunting for simple, private utilities that did not require accounts or uploads. He trained through DigiSkills.pk in WordPress, SEO and Digital Marketing. The WCAG contrast implementation on this page was verified against the W3C's reference formula and cross-checked against the WebAIM contrast checker before publishing.