Colours Copy Ochre Red Copy Ochre Red, HEX #AB544DHSL 4 38% 49%CMYK 18% 73% 63% 20%OKLCH 0.551 0.115 26.215 CopiedOchre RedSW , Wada colour Copy Ochre Red, HEX #AB544DHSL 4 38% 49%CMYK 18% 73% 63% 20%OKLCH 0.551 0.115 26.215 CopiedOchre Red 60Copy Ochre Red 60, HEX #FFE4DFHSL 9 100% 94%CMYK 0% 11% 13% 0%OKLCH 0.939 0.031 30.18 CopiedOchre Red 360Copy Ochre Red 360, HEX #CA7067HSL 5 48% 60%CMYK 0% 45% 49% 21%OKLCH 0.644 0.115 26.727 CopiedOchre Red 450SW , Wada colour Copy Ochre Red 450, HEX #AB544DHSL 4 38% 49%CMYK 18% 73% 63% 20%OKLCH 0.551 0.115 26.215 CopiedOchre Red 460Copy Ochre Red 460, HEX #A65049HSL 5 39% 47%CMYK 0% 52% 56% 35%OKLCH 0.537 0.115 26.364 CopiedOchre Red 740Copy Ochre Red 740, HEX #371B18HSL 6 39% 15%CMYK 0% 51% 56% 78%OKLCH 0.26 0.045 27.034 CopiedCopy Ochre Red 60Copy Ochre Red 360Copy Ochre Red 450Copy Ochre Red 460Copy Ochre Red 740Copy Light Brownish Olive Copy Light Brownish Olive, HEX #806E4BHSL 40 26% 40%CMYK 42% 46% 73% 24%OKLCH 0.546 0.055 83.531 CopiedLight Brownish OliveSW , Wada colour Copy Light Brownish Olive, HEX #806E4BHSL 40 26% 40%CMYK 42% 46% 73% 24%OKLCH 0.546 0.055 83.531 CopiedLight Brownish Olive 50Copy Light Brownish Olive 50, HEX #FDEDCDHSL 40 92% 90%CMYK 0% 6% 19% 1%OKLCH 0.951 0.045 84.569 CopiedLight Brownish Olive 370Copy Light Brownish Olive 370, HEX #9A8864HSL 40 21% 50%CMYK 0% 12% 35% 40%OKLCH 0.634 0.055 84.326 CopiedLight Brownish Olive 450SW , Wada colour Copy Light Brownish Olive 450, HEX #806E4BHSL 40 26% 40%CMYK 42% 46% 73% 24%OKLCH 0.546 0.055 83.531 CopiedLight Brownish Olive 470Copy Light Brownish Olive 470, HEX #7C6A48HSL 39 27% 38%CMYK 0% 15% 42% 51%OKLCH 0.533 0.054 82.87 CopiedLight Brownish Olive 740Copy Light Brownish Olive 740, HEX #2E2207HSL 42 74% 10%CMYK 0% 26% 85% 82%OKLCH 0.26 0.045 84.557 CopiedCopy Light Brownish Olive 50Copy Light Brownish Olive 370Copy Light Brownish Olive 450Copy Light Brownish Olive 470Copy Light Brownish Olive 740Copy Deep Lyons Blue Copy Deep Lyons Blue, HEX #1C4286HSL 218 65% 32%CMYK 100% 85% 15% 6%OKLCH 0.393 0.122 260.968 CopiedDeep Lyons BlueSW , Wada colour Copy Deep Lyons Blue, HEX #1C4286HSL 218 65% 32%CMYK 100% 85% 15% 6%OKLCH 0.393 0.122 260.968 CopiedDeep Lyons Blue 50Copy Deep Lyons Blue 50, HEX #DEF0FFHSL 207 100% 94%CMYK 13% 6% 0% 0%OKLCH 0.946 0.028 243.098 CopiedDeep Lyons Blue 360Copy Deep Lyons Blue 360, HEX #608BD5HSL 218 58% 61%CMYK 55% 35% 0% 16%OKLCH 0.638 0.122 260.718 CopiedDeep Lyons Blue 490Copy Deep Lyons Blue 490, HEX #3B63ABHSL 219 49% 45%CMYK 65% 42% 0% 33%OKLCH 0.507 0.123 261.212 CopiedDeep Lyons Blue 610SW , Wada colour Copy Deep Lyons Blue 610, HEX #1C4286HSL 218 65% 32%CMYK 100% 85% 15% 6%OKLCH 0.393 0.122 260.968 CopiedDeep Lyons Blue 740Copy Deep Lyons Blue 740, HEX #17243AHSL 218 43% 16%CMYK 60% 38% 0% 77%OKLCH 0.26 0.045 260.491 CopiedCopy Deep Lyons Blue 50Copy Deep Lyons Blue 360Copy Deep Lyons Blue 490Copy Deep Lyons Blue 610Copy Deep Lyons Blue 740Neutral, derived
Copy Neutral 10Copy Neutral 30Copy Neutral 50Copy Neutral 100Copy Neutral 340Copy Neutral 350Copy Neutral 490Copy Neutral 500Copy Neutral 700Copy Neutral 760Copy Neutral 790Copy Neutral 830Neutral 10Copy Neutral 10, HEX #FFFDFAHSL 36 100% 99%CMYK 0% 1% 2% 0%OKLCH 0.995 0.005 78.298 CopiedNeutral 30Copy Neutral 30, HEX #F9F6F1HSL 38 40% 96%CMYK 0% 1% 3% 2%OKLCH 0.974 0.007 80.721 CopiedNeutral 50Copy Neutral 50, HEX #F1EEE9HSL 38 22% 93%CMYK 0% 1% 3% 5%OKLCH 0.95 0.007 80.721 CopiedNeutral 100Copy Neutral 100, HEX #E1DED7HSL 42 14% 86%CMYK 0% 1% 4% 12%OKLCH 0.901 0.01 87.475 CopiedNeutral 340Copy Neutral 340, HEX #979288HSL 40 7% 56%CMYK 0% 3% 10% 41%OKLCH 0.661 0.016 84.592 CopiedNeutral 350Copy Neutral 350, HEX #958E82HSL 38 8% 55%CMYK 0% 5% 13% 42%OKLCH 0.649 0.019 81.303 CopiedNeutral 490Copy Neutral 490, HEX #6A6458HSL 40 9% 38%CMYK 0% 6% 17% 58%OKLCH 0.505 0.02 84.585 CopiedNeutral 500Copy Neutral 500, HEX #696257HSL 37 9% 38%CMYK 0% 7% 17% 59%OKLCH 0.499 0.019 79.25 CopiedNeutral 700Copy Neutral 700, HEX #312D27HSL 36 11% 17%CMYK 0% 8% 20% 81%OKLCH 0.299 0.012 78.116 CopiedNeutral 760Copy Neutral 760, HEX #241F14HSL 41 29% 11%CMYK 0% 14% 44% 86%OKLCH 0.241 0.021 86.297 CopiedNeutral 790Copy Neutral 790, HEX #1B1812HSL 40 20% 9%CMYK 0% 11% 33% 89%OKLCH 0.21 0.012 84.531 CopiedNeutral 830Copy Neutral 830, HEX #110F0AHSL 43 26% 5%CMYK 0% 12% 41% 93%OKLCH 0.169 0.01 88.801 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
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 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
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 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-199.css
/*
* Haishoku Sōkan palette #199: CSS custom properties and Tailwind CSS v4 theme
* Wada colors (Ochre Red, Light Brownish Olive, Deep Lyons 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: #fffdfa;
--neutral-30: #f9f6f1;
--neutral-50: #f1eee9;
--neutral-100: #e1ded7;
--neutral-340: #979288;
--neutral-350: #958e82;
--neutral-490: #6a6458;
--neutral-500: #696257;
--neutral-700: #312d27;
--neutral-760: #241f14;
--neutral-790: #1b1812;
--neutral-830: #110f0a;
--ochre-red-60: #ffe4df;
--ochre-red-360: #ca7067;
--ochre-red-450: #ab544d;
--ochre-red-460: #a65049;
--ochre-red-740: #371b18;
--light-brownish-olive-50: #fdedcd;
--light-brownish-olive-370: #9a8864;
--light-brownish-olive-450: #806e4b;
--light-brownish-olive-470: #7c6a48;
--light-brownish-olive-740: #2e2207;
--deep-lyons-blue-50: #def0ff;
--deep-lyons-blue-360: #608bd5;
--deep-lyons-blue-490: #3b63ab;
--deep-lyons-blue-610: #1c4286;
--deep-lyons-blue-740: #17243a;
/* 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-500);
--ochre-red: var(--ochre-red-450);
--ochre-red-on: var(--neutral-30);
--ochre-red-ui: var(--ochre-red-450);
--ochre-red-text: var(--ochre-red-460);
--ochre-red-subtle: var(--ochre-red-60);
--light-brownish-olive: var(--light-brownish-olive-450);
--light-brownish-olive-on: var(--neutral-30);
--light-brownish-olive-ui: var(--light-brownish-olive-450);
--light-brownish-olive-text: var(--light-brownish-olive-470);
--light-brownish-olive-subtle: var(--light-brownish-olive-50);
--deep-lyons-blue: var(--deep-lyons-blue-610);
--deep-lyons-blue-on: var(--neutral-30);
--deep-lyons-blue-ui: var(--deep-lyons-blue-610);
--deep-lyons-blue-text: var(--deep-lyons-blue-610);
--deep-lyons-blue-subtle: var(--deep-lyons-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-490);
--text: var(--neutral-50);
--text-muted: var(--neutral-340);
--ochre-red: var(--ochre-red-450);
--ochre-red-on: var(--neutral-30);
--ochre-red-ui: var(--ochre-red-450);
--ochre-red-text: var(--ochre-red-360);
--ochre-red-subtle: var(--ochre-red-740);
--light-brownish-olive: var(--light-brownish-olive-450);
--light-brownish-olive-on: var(--neutral-30);
--light-brownish-olive-ui: var(--light-brownish-olive-450);
--light-brownish-olive-text: var(--light-brownish-olive-370);
--light-brownish-olive-subtle: var(--light-brownish-olive-740);
--deep-lyons-blue: var(--deep-lyons-blue-610);
--deep-lyons-blue-on: var(--neutral-30);
--deep-lyons-blue-ui: var(--deep-lyons-blue-490);
--deep-lyons-blue-text: var(--deep-lyons-blue-360);
--deep-lyons-blue-subtle: var(--deep-lyons-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-490);
--text: var(--neutral-50);
--text-muted: var(--neutral-340);
--ochre-red: var(--ochre-red-450);
--ochre-red-on: var(--neutral-30);
--ochre-red-ui: var(--ochre-red-450);
--ochre-red-text: var(--ochre-red-360);
--ochre-red-subtle: var(--ochre-red-740);
--light-brownish-olive: var(--light-brownish-olive-450);
--light-brownish-olive-on: var(--neutral-30);
--light-brownish-olive-ui: var(--light-brownish-olive-450);
--light-brownish-olive-text: var(--light-brownish-olive-370);
--light-brownish-olive-subtle: var(--light-brownish-olive-740);
--deep-lyons-blue: var(--deep-lyons-blue-610);
--deep-lyons-blue-on: var(--neutral-30);
--deep-lyons-blue-ui: var(--deep-lyons-blue-490);
--deep-lyons-blue-text: var(--deep-lyons-blue-360);
--deep-lyons-blue-subtle: var(--deep-lyons-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-490: var(--neutral-490);
--color-neutral-500: var(--neutral-500);
--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-ochre-red-60: var(--ochre-red-60);
--color-ochre-red-360: var(--ochre-red-360);
--color-ochre-red-450: var(--ochre-red-450);
--color-ochre-red-460: var(--ochre-red-460);
--color-ochre-red-740: var(--ochre-red-740);
--color-light-brownish-olive-50: var(--light-brownish-olive-50);
--color-light-brownish-olive-370: var(--light-brownish-olive-370);
--color-light-brownish-olive-450: var(--light-brownish-olive-450);
--color-light-brownish-olive-470: var(--light-brownish-olive-470);
--color-light-brownish-olive-740: var(--light-brownish-olive-740);
--color-deep-lyons-blue-50: var(--deep-lyons-blue-50);
--color-deep-lyons-blue-360: var(--deep-lyons-blue-360);
--color-deep-lyons-blue-490: var(--deep-lyons-blue-490);
--color-deep-lyons-blue-610: var(--deep-lyons-blue-610);
--color-deep-lyons-blue-740: var(--deep-lyons-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-ochre-red: var(--ochre-red);
--color-ochre-red-on: var(--ochre-red-on);
--color-ochre-red-ui: var(--ochre-red-ui);
--color-ochre-red-text: var(--ochre-red-text);
--color-ochre-red-subtle: var(--ochre-red-subtle);
--color-light-brownish-olive: var(--light-brownish-olive);
--color-light-brownish-olive-on: var(--light-brownish-olive-on);
--color-light-brownish-olive-ui: var(--light-brownish-olive-ui);
--color-light-brownish-olive-text: var(--light-brownish-olive-text);
--color-light-brownish-olive-subtle: var(--light-brownish-olive-subtle);
--color-deep-lyons-blue: var(--deep-lyons-blue);
--color-deep-lyons-blue-on: var(--deep-lyons-blue-on);
--color-deep-lyons-blue-ui: var(--deep-lyons-blue-ui);
--color-deep-lyons-blue-text: var(--deep-lyons-blue-text);
--color-deep-lyons-blue-subtle: var(--deep-lyons-blue-subtle);
}