ColorWind
ProductSolutionsPricingCustomersDocsChangelog
Log in
NEWOne-click NativeWind export — light & dark
Pick once,
theme everything.
theme everything.
ColorWind turns the 60-30-10 rule into a complete light and dark theme for your React Native app — every NativeWind token, previewed live and ready to export.
Light + dark
60-30-10 rule
NativeWind ready
app.colorwind.dev / themes / ocean-breeze
Color balance
The 60-30-10 rule
Ocean Breeze
Primary · background60%
Secondary · surfaces30%
Accent · actions10%
Live preview · light + dark
Export theme
Contrast · AA
All pass ✓
Shipping themes in apps at
LinearRAMP::vercelRetool◆ FigmaNotionLoom
Why ColorWind
Everything you need to settle on a palette and ship it.
Built on the 60-30-10 rule
Pick a primary, secondary, and accent and ColorWind balances the rest — surfaces, text, borders, and states — into a palette that just works.
Primary · 60%
background
Secondary · 30%
surfaces
Accent · 10%
actions
Neutrals
text + borders
Live component preview
See buttons, cards, inputs, and alerts restyle the instant you tweak a token — no rebuild required.
Light & dark in one pass
Design the light theme and ColorWind derives a matching dark mode automatically. Toggle to compare.
Every token, covered
primary, background, text, border, placeholder, success, error — 40+ design tokens, all editable.
Export to NativeWind
themeColors.ts, CSS variable maps, and themes = { light: vars(...) }. Copy, paste, ship.
40+
design tokens per theme
2
modes — light + dark
3
export formats
1-click
to NativeWind
How it works
From a blank canvas to an exported theme in three steps.
01
Pick your colors
Choose a primary, secondary, and accent with the 60-30-10 rule — or start from a preset and tweak.
02
Tune the tokens
Adjust background, text, border, and state colors. Every component in the preview updates live as you go.
03
Export & paste
Grab themeColors.ts or CSS variable maps and drop them straight into your NativeWind + Tailwind config.
"We went from arguing about hex codes in Slack to a locked-in light and dark theme in an afternoon. ColorWind's NativeWind export dropped straight into our config — zero rework."
DW
Dana Whitfield
Lead Mobile Engineer · Expo app
Build your theme today.
Free to design and preview. No sign-up to start, no credit card — export when you're happy.
ColorWind
A visual theme builder for React Native developers using NativeWind + Tailwind CSS.
Product
Theme builderPresetsToken editorLive previewExport
Solutions
React NativeExpo appsNativeWindDesign systems
Resources
DocsChangelogGuidesExamples
Company
AboutBlogRoadmapContact
© 2026 ColorWind · colorwind.dev
PrivacyTermsSecurityCookies