Tinta Cherry Blossom Rain
5-color palette
Cherry Blossom Rain is a 5-color palette built from #FFF8FA, #FADADD, #F4A6B6, #A9C2D9, and #2F3E55. Its hues sit in the pink and blue ranges, and reads as muted and cool. The strongest pairing is #FFF8FA against #2F3E55 at 10.33:1 — enough for WCAG AAA body text.
UI Preview
See how this palette looks in a real interface
Your design workflow,
supercharged.
The all-in-one platform where designers and developers collaborate to build stunning products. Faster than ever before.
No credit card required · Free 14-day trial · Cancel anytime
Revenue
$48.2k
↑ 12.5% vs last month
Users
2,841
↑ 12.5% vs last month
Churn
2.4%
↓ 0.8% vs last month
Revenue Overview
Trusted by 10,000+ teams at leading companies
Everything you need to ship
Powerful tools designed for modern product teams. From ideation to deployment in record time.
Lightning Fast
Deploy in seconds with our optimized pipeline and global CDN with 200+ edge locations.
Learn more →
Secure by Default
Enterprise-grade security with SOC 2 compliance, SSO, and role-based access control.
Learn more →
Built to Scale
Handle millions of users effortlessly. Auto-scales with your traffic, zero config needed.
Learn more →
10K+
Teams worldwide
99.9%
Uptime SLA
2M+
Projects created
Loved by teams everywhere
"Acme cut our design-to-dev handoff time in half. Absolutely game-changing for our workflow."
Sarah Chen
Head of Design, Northwind
"The collaboration features are unreal. Our remote team finally feels like we're in the same room."
Marcus Johnson
CTO, Lumen Labs
"We shipped 3x faster after switching. I can't imagine going back to our old tools."
Aiko Tanaka
Product Lead, Parcel & Co
Simple, transparent pricing
Start for free, upgrade when you need more. No hidden fees.
Starter
Free
Perfect for individuals
- ✓ 5 projects
- ✓ 1 GB storage
- ✓ Community support
Pro
$29/mo
For growing teams
- ✓ Unlimited projects
- ✓ 50 GB storage
- ✓ Priority support
- ✓ Custom domains
Enterprise
Custom
For large organizations
- ✓ Everything in Pro
- ✓ SSO & SAML
- ✓ SLA guarantee
- ✓ Dedicated CSM
Ready to get started?
Join thousands of teams building better products with Acme. Your first 14 days are on us.
Shade scales
Each color as a 50–950 ramp, like Tailwind's built-in palettes — ready for a design system. The ringed step is closest to the original color.
#FFF8FA
#FADADD
#F4A6B6
#A9C2D9
#2F3E55
@theme {
--color-cherry-blossom-rain-1-50: #F8F7F7;
--color-cherry-blossom-rain-1-100: #EDEBEC;
--color-cherry-blossom-rain-1-200: #DDDADB;
--color-cherry-blossom-rain-1-300: #C6C2C3;
--color-cherry-blossom-rain-1-400: #A9A3A4;
--color-cherry-blossom-rain-1-500: #8F898A;
--color-cherry-blossom-rain-1-600: #777173;
--color-cherry-blossom-rain-1-700: #605B5C;
--color-cherry-blossom-rain-1-800: #4C4849;
--color-cherry-blossom-rain-1-900: #3C3839;
--color-cherry-blossom-rain-1-950: #262324;
}
@theme {
--color-cherry-blossom-rain-2-50: #FBF6F6;
--color-cherry-blossom-rain-2-100: #F3EAEA;
--color-cherry-blossom-rain-2-200: #E6D6D8;
--color-cherry-blossom-rain-2-300: #D5BCBE;
--color-cherry-blossom-rain-2-400: #BA9C9F;
--color-cherry-blossom-rain-2-500: #A18184;
--color-cherry-blossom-rain-2-600: #886A6D;
--color-cherry-blossom-rain-2-700: #6F5457;
--color-cherry-blossom-rain-2-800: #584245;
--color-cherry-blossom-rain-2-900: #463436;
--color-cherry-blossom-rain-2-950: #2D2021;
}
@theme {
--color-cherry-blossom-rain-3-50: #FFF4F6;
--color-cherry-blossom-rain-3-100: #FBE6EA;
--color-cherry-blossom-rain-3-200: #F5D0D6;
--color-cherry-blossom-rain-3-300: #E9B2BD;
--color-cherry-blossom-rain-3-400: #D38E9C;
--color-cherry-blossom-rain-3-500: #BB7282;
--color-cherry-blossom-rain-3-600: #A05B6B;
--color-cherry-blossom-rain-3-700: #834755;
--color-cherry-blossom-rain-3-800: #693843;
--color-cherry-blossom-rain-3-900: #532B34;
--color-cherry-blossom-rain-3-950: #371A20;
}
@theme {
--color-cherry-blossom-rain-4-50: #F5F8FB;
--color-cherry-blossom-rain-4-100: #E7EDF3;
--color-cherry-blossom-rain-4-200: #D1DCE7;
--color-cherry-blossom-rain-4-300: #B4C6D6;
--color-cherry-blossom-rain-4-400: #92A8BC;
--color-cherry-blossom-rain-4-500: #768EA3;
--color-cherry-blossom-rain-4-600: #5F768A;
--color-cherry-blossom-rain-4-700: #4B5F70;
--color-cherry-blossom-rain-4-800: #3B4B5A;
--color-cherry-blossom-rain-4-900: #2E3B47;
--color-cherry-blossom-rain-4-950: #1C252E;
}
@theme {
--color-cherry-blossom-rain-5-50: #F5F8FB;
--color-cherry-blossom-rain-5-100: #E8ECF4;
--color-cherry-blossom-rain-5-200: #D3DBE8;
--color-cherry-blossom-rain-5-300: #B7C4D8;
--color-cherry-blossom-rain-5-400: #96A6BE;
--color-cherry-blossom-rain-5-500: #7A8CA6;
--color-cherry-blossom-rain-5-600: #64748D;
--color-cherry-blossom-rain-5-700: #4F5D73;
--color-cherry-blossom-rain-5-800: #3E4A5C;
--color-cherry-blossom-rain-5-900: #303A48;
--color-cherry-blossom-rain-5-950: #1D242F;
}Light & dark theme
This palette as semantic tokens for a real interface, in both modes. Text, muted text and button labels are adjusted until they pass WCAG AA.
Light
Weekly summary
Everything your team shipped since Monday.
Dark
Weekly summary
Everything your team shipped since Monday.
:root {
--background: #FDF9FA;
--surface: #F7F2F3;
--text: #20181A;
--muted: #6A6162;
--border: #E4DBDD;
--primary: #C77C8C;
--primary-foreground: #1C1917;
--accent: #2F3E55;
--accent-foreground: #FAFAF9;
}
.dark {
--background: #130E0F;
--surface: #1F1719;
--text: #F6EBED;
--muted: #ACA2A3;
--border: #383132;
--primary: #F4A6B6;
--primary-foreground: #1C1917;
--accent: #8EA0BB;
--accent-foreground: #1C1917;
}Contrast checker
Text color (rows) on background (columns), scored against WCAG 2.1. 8 of 20 palette combinations are readable as body text. White and near-black text are included for comparison.
| Text ↓ / Bg → | #FFF8FA | #FADADD | #F4A6B6 | #A9C2D9 | #2F3E55 |
|---|---|---|---|---|---|
| #FFF8FA | Same color | 1.2Fail | 1.8Fail | 1.8Fail | 10.3AAA |
| #FADADD | 1.2Fail | Same color | 1.5Fail | 1.4Fail | 8.3AAA |
| #F4A6B6 | 1.8Fail | 1.5Fail | Same color | 1.0Fail | 5.7AA |
| #A9C2D9 | 1.8Fail | 1.4Fail | 1.0Fail | Same color | 5.9AA |
| #2F3E55 | 10.3AAA | 8.3AAA | 5.7AA | 5.9AA | Same color |
| White | 1.0Fail | 1.3Fail | 1.9Fail | 1.8Fail | 10.8AAA |
| Near-black | 16.7AAA | 13.4AAA | 9.1AAA | 9.5AAA | 1.6Fail |
AAA ≥ 7:1 · AA ≥ 4.5:1 body text· AA18 ≥ 3:1 large text (18pt, or 14pt bold) only
Text that works on each color
- Near-black on #FFF8FA · 16.7:1
- Near-black on #FADADD · 13.4:1
- Near-black on #F4A6B6 · 9.1:1
- Near-black on #A9C2D9 · 9.5:1
- White on #2F3E55 · 10.8:1
Suggested fixes for 12 failing pairs
The nearest shade of the text color that passes AA (4.5:1), keeping its hue. Click one to copy it.
Color blindness check
About 1 in 12 men and 1 in 200 women see color differently. Simulated with the Machado (2009) model.
No green cones — the most common form. Light Pink, #F4A6B6 and Light Steel Blue, #A9C2D9 become hard to tell apart — don't rely on color alone to separate them.
What are the HEX, RGB, and HSL values for Cherry Blossom Rain?
Every color in this 5-color set, with its contrast ratio against white and black.
| Color | Name | HEX | RGB | HSL | On white | On black |
|---|---|---|---|---|---|---|
| #FFF8FA | Snow | #FFF8FA | 255, 248, 250 | 343°, 100%, 99% | 1.05:1 | 20.06:1 |
| #FADADD | Pale Pink | #FADADD | 250, 218, 221 | 354°, 76%, 92% | 1.30:1 | 16.14:1 |
| #F4A6B6 | Light Pink | #F4A6B6 | 244, 166, 182 | 348°, 78%, 80% | 1.91:1 | 10.98:1 |
| #A9C2D9 | Light Steel Blue | #A9C2D9 | 169, 194, 217 | 209°, 39%, 76% | 1.84:1 | 11.41:1 |
| #2F3E55 | Charcoal Blue | #2F3E55 | 47, 62, 85 | 216°, 29%, 26% | 10.82:1 | 1.94:1 |
Related palettes
Others sharing the same hues and tone