Colours Copy Eugenia Red | B Copy Eugenia Red | B, HEX #DA525DHSL 355 65% 59%CMYK 0% 80% 50% 10%OKLCH 0.622 0.17 18.828 CopiedEugenia Red | BSW , Wada colour Copy Eugenia Red | B, HEX #DA525DHSL 355 65% 59%CMYK 0% 80% 50% 10%OKLCH 0.622 0.17 18.828 CopiedEugenia Red | B 60Copy Eugenia Red | B 60, HEX #FFE3E3HSL 0 100% 95%CMYK 0% 11% 11% 0%OKLCH 0.939 0.031 17.715 CopiedEugenia Red | B 350Copy Eugenia Red | B 350, HEX #E45B65HSL 356 72% 63%CMYK 0% 60% 56% 11%OKLCH 0.65 0.17 18.856 CopiedEugenia Red | B 380SW , Wada colour Copy Eugenia Red | B 380, HEX #DA525DHSL 355 65% 59%CMYK 0% 80% 50% 10%OKLCH 0.622 0.17 18.828 CopiedEugenia Red | B 460Copy Eugenia Red | B 460, HEX #BE3746HSL 353 55% 48%CMYK 0% 71% 63% 25%OKLCH 0.542 0.171 18.912 CopiedEugenia Red | B 740Copy Eugenia Red | B 740, HEX #371A1BHSL 358 36% 16%CMYK 0% 53% 51% 78%OKLCH 0.259 0.046 18.581 CopiedCopy Eugenia Red | B 60Copy Eugenia Red | B 350Copy Eugenia Red | B 380Copy Eugenia Red | B 460Copy Eugenia Red | B 740Copy Raw Sienna Copy Raw Sienna, HEX #BB7125HSL 30 67% 44%CMYK 18% 58% 100% 12%OKLCH 0.617 0.127 61.37 CopiedRaw SiennaSW , Wada colour Copy Raw Sienna, HEX #BB7125HSL 30 67% 44%CMYK 18% 58% 100% 12%OKLCH 0.617 0.127 61.37 CopiedRaw Sienna 60Copy Raw Sienna 60, HEX #FFE8D1HSL 30 100% 91%CMYK 0% 9% 18% 0%OKLCH 0.944 0.039 67.318 CopiedRaw Sienna 360Copy Raw Sienna 360, HEX #C3792EHSL 30 62% 47%CMYK 0% 38% 76% 24%OKLCH 0.642 0.127 61.898 CopiedRaw Sienna 380SW , Wada colour Copy Raw Sienna 380, HEX #BB7125HSL 30 67% 44%CMYK 18% 58% 100% 12%OKLCH 0.617 0.127 61.37 CopiedRaw Sienna 470Copy Raw Sienna 470, HEX #A05800HSL 33 100% 31%CMYK 0% 45% 100% 37%OKLCH 0.534 0.125 60.015 CopiedRaw Sienna 740Copy Raw Sienna 740, HEX #341F0BHSL 29 65% 12%CMYK 0% 40% 79% 80%OKLCH 0.262 0.045 62.116 CopiedCopy Raw Sienna 60Copy Raw Sienna 360Copy Raw Sienna 380Copy Raw Sienna 470Copy Raw Sienna 740Copy Sulphine Yellow Copy Sulphine Yellow, HEX #C19F2CHSL 46 63% 46%CMYK 24% 32% 100% 4%OKLCH 0.714 0.132 91.475 CopiedSulphine YellowSW , Wada colour Copy Sulphine Yellow, HEX #C19F2CHSL 46 63% 46%CMYK 24% 32% 100% 4%OKLCH 0.714 0.132 91.475 CopiedSulphine Yellow 50Copy Sulphine Yellow 50, HEX #F9EECDHSL 45 79% 89%CMYK 0% 4% 18% 2%OKLCH 0.949 0.045 91.738 CopiedSulphine Yellow 290SW , Wada colour Copy Sulphine Yellow 290, HEX #C19F2CHSL 46 63% 46%CMYK 24% 32% 100% 4%OKLCH 0.714 0.132 91.475 CopiedSulphine Yellow 350Copy Sulphine Yellow 350, HEX #AC8B02HSL 48 98% 34%CMYK 0% 19% 99% 33%OKLCH 0.649 0.132 91.83 CopiedSulphine Yellow 470Copy Sulphine Yellow 470, HEX #876800HSL 46 100% 26%CMYK 0% 23% 100% 47%OKLCH 0.533 0.109 88.027 CopiedSulphine Yellow 740Copy Sulphine Yellow 740, HEX #2C2307HSL 45 73% 10%CMYK 0% 20% 84% 83%OKLCH 0.26 0.045 91.101 CopiedCopy Sulphine Yellow 50Copy Sulphine Yellow 290Copy Sulphine Yellow 350Copy Sulphine Yellow 470Copy Sulphine Yellow 740Copy Green Blue Copy Green Blue, HEX #099197HSL 183 89% 31%CMYK 82% 24% 40% 3%OKLCH 0.597 0.1 200.051 CopiedGreen BlueSW , Wada colour Copy Green Blue, HEX #099197HSL 183 89% 31%CMYK 82% 24% 40% 3%OKLCH 0.597 0.1 200.051 CopiedGreen Blue 50Copy Green Blue 50, HEX #CCF8FAHSL 183 82% 89%CMYK 18% 1% 0% 2%OKLCH 0.949 0.045 199.831 CopiedGreen Blue 370Copy Green Blue 370, HEX #209AA0HSL 183 67% 38%CMYK 80% 4% 0% 37%OKLCH 0.627 0.1 200.103 CopiedGreen Blue 400SW , Wada colour Copy Green Blue 400, HEX #099197HSL 183 89% 31%CMYK 82% 24% 40% 3%OKLCH 0.597 0.1 200.051 CopiedGreen Blue 480Copy Green Blue 480, HEX #007980HSL 183 100% 25%CMYK 100% 5% 0% 50%OKLCH 0.524 0.089 201.892 CopiedGreen Blue 740Copy Green Blue 740, HEX #002A2DHSL 184 100% 9%CMYK 100% 7% 0% 82%OKLCH 0.259 0.044 202.125 CopiedCopy Green Blue 50Copy Green Blue 370Copy Green Blue 400Copy Green Blue 480Copy Green Blue 740Neutral, derived
Copy Neutral 10Copy Neutral 30Copy Neutral 50Copy Neutral 100Copy Neutral 340Copy Neutral 350Copy Neutral 500Copy Neutral 510Copy Neutral 700Copy Neutral 760Copy Neutral 790Copy Neutral 830Neutral 10Copy Neutral 10, HEX #FAFEFEHSL 180 67% 99%CMYK 2% 0% 0% 0%OKLCH 0.994 0.004 197.089 CopiedNeutral 30Copy Neutral 30, HEX #F1F8F9HSL 188 40% 96%CMYK 3% 0% 0% 2%OKLCH 0.974 0.008 207.143 CopiedNeutral 50Copy Neutral 50, HEX #E9F0F0HSL 180 19% 93%CMYK 3% 0% 0% 6%OKLCH 0.95 0.007 197.031 CopiedNeutral 100Copy Neutral 100, HEX #D7E0E0HSL 180 13% 86%CMYK 4% 0% 0% 12%OKLCH 0.9 0.01 196.984 CopiedNeutral 340Copy Neutral 340, HEX #889596HSL 184 6% 56%CMYK 9% 1% 0% 41%OKLCH 0.66 0.015 202.379 CopiedNeutral 350Copy Neutral 350, HEX #819293HSL 183 8% 54%CMYK 12% 1% 0% 42%OKLCH 0.647 0.02 200.994 CopiedNeutral 500Copy Neutral 500, HEX #576868HSL 180 9% 37%CMYK 16% 0% 0% 59%OKLCH 0.503 0.021 196.517 CopiedNeutral 510Copy Neutral 510, HEX #566768HSL 183 9% 37%CMYK 17% 1% 0% 59%OKLCH 0.5 0.021 200.888 CopiedNeutral 700Copy Neutral 700, HEX #273030HSL 180 10% 17%CMYK 19% 0% 0% 81%OKLCH 0.301 0.012 196.512 CopiedNeutral 760Copy Neutral 760, HEX #142223HSL 184 27% 11%CMYK 43% 3% 0% 86%OKLCH 0.24 0.019 201.591 CopiedNeutral 790Copy Neutral 790, HEX #121A1AHSL 180 18% 9%CMYK 31% 0% 0% 90%OKLCH 0.21 0.012 196.287 CopiedNeutral 830Copy Neutral 830, HEX #0A1111HSL 180 26% 5%CMYK 41% 0% 0% 93%OKLCH 0.17 0.011 196.186 CopiedInterface colours Derived from this palette’s Wada colours by Haishoku Sōkan, not by Wada. Every colour in the sample below comes from these derived roles.
Light mode app sample built from this palette’s interface colours. Its controls are a preview and don’t respond. Proofs are back from the printer
Approve three prints by Friday to keep the launch date. Review proofs
Orders +12% 486 vs last week Revenue +8% ¥1.28M vs last week Returns −0.3 1.4% Fewer than usual Conversion +0.4 3.2% Of store visits Orders this week By collection
Prints149 Textiles96 Ceramics57 Stationery42
Next payout Scheduled ¥482,600
Sales ¥512,400
Fees −¥24,600
Refunds −¥5,200
Total ¥482,600 Paid to your bank on the 15th of each month.
Print runs Prints 312 / 400 Textiles 168 / 250 Ceramics 54 / 120 Stationery 410 / 500 RI Ren Ishida 2h
The indigo on print 4 reads darker than the proof.
AM Aiko Mori 1h
Agreed. I’ll ask the printer for a second pass.
Store settings PaymentsBank and card payouts ShippingZones, rates and couriers TaxesConsumption tax at 10% Mo Tu We Th Fr Sa Su 23 24 25 26 27 28 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 M 9 T 10 W 11 T 12 F 13 S 14 S 15 Launch Fri 09:00 Market stall Sat 11:00
Returns No returns this week
Returned orders show up here with a reason and a refund status.
View past returns Dark mode app sample built from this palette’s interface colours. Its controls are a preview and don’t respond. Proofs are back from the printer
Approve three prints by Friday to keep the launch date. Review proofs
Orders +12% 486 vs last week Revenue +8% ¥1.28M vs last week Returns −0.3 1.4% Fewer than usual Conversion +0.4 3.2% Of store visits Orders this week By collection
Prints149 Textiles96 Ceramics57 Stationery42
Next payout Scheduled ¥482,600
Sales ¥512,400
Fees −¥24,600
Refunds −¥5,200
Total ¥482,600 Paid to your bank on the 15th of each month.
Print runs Prints 312 / 400 Textiles 168 / 250 Ceramics 54 / 120 Stationery 410 / 500 RI Ren Ishida 2h
The indigo on print 4 reads darker than the proof.
AM Aiko Mori 1h
Agreed. I’ll ask the printer for a second pass.
Store settings PaymentsBank and card payouts ShippingZones, rates and couriers TaxesConsumption tax at 10% Mo Tu We Th Fr Sa Su 23 24 25 26 27 28 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 M 9 T 10 W 11 T 12 F 13 S 14 S 15 Launch Fri 09:00 Market stall Sat 11:00
Returns No returns this week
Returned orders show up here with a reason and a refund status.
View past returns Pairs that pass Every colour of this palette that reaches WCAG 2.2 AA for normal text (4.5:1) on each background, written in that colour. Pairs marked AAA reach 7:1. A colour not listed on a background is below 4.5:1 there, so keep text in it off that background.
Scroll sideways for more backgrounds.
Wallpaper A PNG for a Mac desktop or a phone, made from this palette’s numbered steps. Each Wada colour appears unchanged as a bar or cell; the other steps are derived by Haishoku Sōkan, not by Wada.
Layout Size Download PNG PNG · 3840 × 2400
CSS JSON
Copy Copied CSS variables Download haishoku-sokan-252.css
/*
* Haishoku Sōkan palette #252: CSS custom properties and Tailwind CSS v4 theme
* Wada colors (Eugenia Red | B, Raw Sienna, Sulphine Yellow, Green Blue) are unchanged, from Sanzō Wada, A Dictionary of Color Combinations.
* Numbered steps (bigger is darker) hold every value; role names such as
* background or the -on, -ui, -text and -subtle variants point at a step.
* Every value except the Wada colors is derived by Haishoku Sōkan from this
* palette and is not a Wada color.
* Derived values: CC0 1.0, no credit required.
*
* The @theme block at the end is for Tailwind CSS v4: place this file after
* @import "tailwindcss"; for utilities such as bg-background. Without
* Tailwind, browsers ignore it.
*/
:root {
color-scheme: light;
/* Steps */
--neutral-10: #fafefe;
--neutral-30: #f1f8f9;
--neutral-50: #e9f0f0;
--neutral-100: #d7e0e0;
--neutral-340: #889596;
--neutral-350: #819293;
--neutral-500: #576868;
--neutral-510: #566768;
--neutral-700: #273030;
--neutral-760: #142223;
--neutral-790: #121a1a;
--neutral-830: #0a1111;
--eugenia-red-b-60: #ffe3e3;
--eugenia-red-b-350: #e45b65;
--eugenia-red-b-380: #da525d;
--eugenia-red-b-460: #be3746;
--eugenia-red-b-740: #371a1b;
--raw-sienna-60: #ffe8d1;
--raw-sienna-360: #c3792e;
--raw-sienna-380: #bb7125;
--raw-sienna-470: #a05800;
--raw-sienna-740: #341f0b;
--sulphine-yellow-50: #f9eecd;
--sulphine-yellow-290: #c19f2c;
--sulphine-yellow-350: #ac8b02;
--sulphine-yellow-470: #876800;
--sulphine-yellow-740: #2c2307;
--green-blue-50: #ccf8fa;
--green-blue-370: #209aa0;
--green-blue-400: #099197;
--green-blue-480: #007980;
--green-blue-740: #002a2d;
/* Roles, light */
--background: var(--neutral-30);
--surface: var(--neutral-10);
--border: var(--neutral-100);
--border-strong: var(--neutral-350);
--text: var(--neutral-760);
--text-muted: var(--neutral-510);
--eugenia-red-b: var(--eugenia-red-b-380);
--eugenia-red-b-on: var(--neutral-830);
--eugenia-red-b-ui: var(--eugenia-red-b-380);
--eugenia-red-b-text: var(--eugenia-red-b-460);
--eugenia-red-b-subtle: var(--eugenia-red-b-60);
--raw-sienna: var(--raw-sienna-380);
--raw-sienna-on: var(--neutral-830);
--raw-sienna-ui: var(--raw-sienna-380);
--raw-sienna-text: var(--raw-sienna-470);
--raw-sienna-subtle: var(--raw-sienna-60);
--sulphine-yellow: var(--sulphine-yellow-290);
--sulphine-yellow-on: var(--neutral-830);
--sulphine-yellow-ui: var(--sulphine-yellow-350);
--sulphine-yellow-text: var(--sulphine-yellow-470);
--sulphine-yellow-subtle: var(--sulphine-yellow-50);
--green-blue: var(--green-blue-400);
--green-blue-on: var(--neutral-830);
--green-blue-ui: var(--green-blue-400);
--green-blue-text: var(--green-blue-480);
--green-blue-subtle: var(--green-blue-50);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--background: var(--neutral-830);
--surface: var(--neutral-790);
--border: var(--neutral-700);
--border-strong: var(--neutral-500);
--text: var(--neutral-50);
--text-muted: var(--neutral-340);
--eugenia-red-b: var(--eugenia-red-b-380);
--eugenia-red-b-on: var(--neutral-830);
--eugenia-red-b-ui: var(--eugenia-red-b-380);
--eugenia-red-b-text: var(--eugenia-red-b-350);
--eugenia-red-b-subtle: var(--eugenia-red-b-740);
--raw-sienna: var(--raw-sienna-380);
--raw-sienna-on: var(--neutral-830);
--raw-sienna-ui: var(--raw-sienna-380);
--raw-sienna-text: var(--raw-sienna-360);
--raw-sienna-subtle: var(--raw-sienna-740);
--sulphine-yellow: var(--sulphine-yellow-290);
--sulphine-yellow-on: var(--neutral-830);
--sulphine-yellow-ui: var(--sulphine-yellow-290);
--sulphine-yellow-text: var(--sulphine-yellow-290);
--sulphine-yellow-subtle: var(--sulphine-yellow-740);
--green-blue: var(--green-blue-400);
--green-blue-on: var(--neutral-830);
--green-blue-ui: var(--green-blue-400);
--green-blue-text: var(--green-blue-370);
--green-blue-subtle: var(--green-blue-740);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--background: var(--neutral-830);
--surface: var(--neutral-790);
--border: var(--neutral-700);
--border-strong: var(--neutral-500);
--text: var(--neutral-50);
--text-muted: var(--neutral-340);
--eugenia-red-b: var(--eugenia-red-b-380);
--eugenia-red-b-on: var(--neutral-830);
--eugenia-red-b-ui: var(--eugenia-red-b-380);
--eugenia-red-b-text: var(--eugenia-red-b-350);
--eugenia-red-b-subtle: var(--eugenia-red-b-740);
--raw-sienna: var(--raw-sienna-380);
--raw-sienna-on: var(--neutral-830);
--raw-sienna-ui: var(--raw-sienna-380);
--raw-sienna-text: var(--raw-sienna-360);
--raw-sienna-subtle: var(--raw-sienna-740);
--sulphine-yellow: var(--sulphine-yellow-290);
--sulphine-yellow-on: var(--neutral-830);
--sulphine-yellow-ui: var(--sulphine-yellow-290);
--sulphine-yellow-text: var(--sulphine-yellow-290);
--sulphine-yellow-subtle: var(--sulphine-yellow-740);
--green-blue: var(--green-blue-400);
--green-blue-on: var(--neutral-830);
--green-blue-ui: var(--green-blue-400);
--green-blue-text: var(--green-blue-370);
--green-blue-subtle: var(--green-blue-740);
}
@theme inline {
--color-neutral-*: initial;
--color-neutral-10: var(--neutral-10);
--color-neutral-30: var(--neutral-30);
--color-neutral-50: var(--neutral-50);
--color-neutral-100: var(--neutral-100);
--color-neutral-340: var(--neutral-340);
--color-neutral-350: var(--neutral-350);
--color-neutral-500: var(--neutral-500);
--color-neutral-510: var(--neutral-510);
--color-neutral-700: var(--neutral-700);
--color-neutral-760: var(--neutral-760);
--color-neutral-790: var(--neutral-790);
--color-neutral-830: var(--neutral-830);
--color-eugenia-red-b-60: var(--eugenia-red-b-60);
--color-eugenia-red-b-350: var(--eugenia-red-b-350);
--color-eugenia-red-b-380: var(--eugenia-red-b-380);
--color-eugenia-red-b-460: var(--eugenia-red-b-460);
--color-eugenia-red-b-740: var(--eugenia-red-b-740);
--color-raw-sienna-60: var(--raw-sienna-60);
--color-raw-sienna-360: var(--raw-sienna-360);
--color-raw-sienna-380: var(--raw-sienna-380);
--color-raw-sienna-470: var(--raw-sienna-470);
--color-raw-sienna-740: var(--raw-sienna-740);
--color-sulphine-yellow-50: var(--sulphine-yellow-50);
--color-sulphine-yellow-290: var(--sulphine-yellow-290);
--color-sulphine-yellow-350: var(--sulphine-yellow-350);
--color-sulphine-yellow-470: var(--sulphine-yellow-470);
--color-sulphine-yellow-740: var(--sulphine-yellow-740);
--color-green-blue-50: var(--green-blue-50);
--color-green-blue-370: var(--green-blue-370);
--color-green-blue-400: var(--green-blue-400);
--color-green-blue-480: var(--green-blue-480);
--color-green-blue-740: var(--green-blue-740);
--color-background: var(--background);
--color-surface: var(--surface);
--color-border: var(--border);
--color-border-strong: var(--border-strong);
--color-text: var(--text);
--color-text-muted: var(--text-muted);
--color-eugenia-red-b: var(--eugenia-red-b);
--color-eugenia-red-b-on: var(--eugenia-red-b-on);
--color-eugenia-red-b-ui: var(--eugenia-red-b-ui);
--color-eugenia-red-b-text: var(--eugenia-red-b-text);
--color-eugenia-red-b-subtle: var(--eugenia-red-b-subtle);
--color-raw-sienna: var(--raw-sienna);
--color-raw-sienna-on: var(--raw-sienna-on);
--color-raw-sienna-ui: var(--raw-sienna-ui);
--color-raw-sienna-text: var(--raw-sienna-text);
--color-raw-sienna-subtle: var(--raw-sienna-subtle);
--color-sulphine-yellow: var(--sulphine-yellow);
--color-sulphine-yellow-on: var(--sulphine-yellow-on);
--color-sulphine-yellow-ui: var(--sulphine-yellow-ui);
--color-sulphine-yellow-text: var(--sulphine-yellow-text);
--color-sulphine-yellow-subtle: var(--sulphine-yellow-subtle);
--color-green-blue: var(--green-blue);
--color-green-blue-on: var(--green-blue-on);
--color-green-blue-ui: var(--green-blue-ui);
--color-green-blue-text: var(--green-blue-text);
--color-green-blue-subtle: var(--green-blue-subtle);
}