Not a filler colour: the paper. And the quality of a palette shows more in its paper than in its accent.
What goes with beige
Beige is an orange or a yellow with a great deal of light and very little load. That's why there are so many and why they behave differently: a beige with pink inside is warm and friendly, a beige with green is unbleached linen, and a beige with grey is what people call greige and works as a modern neutral.
It serves as a background for almost anything, and that's its value: pure white on screen is a torch, and a beige ground lowers the glare without anyone noticing why it reads better. With black and a strong accent it gives an impeccable editorial palette. With brown and terracotta, a ceramic one. With sage green, a design-studio one — ours borrows from there.
Its only risk is blandness. A beige with nothing beside it isn't understated, it's an unfinished site. The rule that saves it: the background can be soft, but the text has to be frankly dark and the accent frankly saturated. Three middle terms together are what produces that half-done feeling.
Five to start with
Five palettes with beige, each with a reason.
Two come from Wada's dictionary and three from named harmony rules. Each arrives with the roles assigned — which colour is the background, which the text, which the button — painted at page size and with the contrast measured. If you want your exact hue, change it in the tool.
01/05
From Wada's dictionary, 1933
Wada combination 167
It contains a colour very close to yours (Ecru) and has been in use for almost a century. The original colours are called Ecru · Pale King's Blue · Vandar Poel's Blue.
The plate, as printed
3 colours in equal parts, as in the book. It is the inspiration, not the interface. Click one to copy it.
Adapted for screen
The same hue as the plate with the lightness moved to where an interface needs it: the background rests, the surface keeps the colour from the book and the accent earns the button. Each role says which colour it comes from and what was done to it. Click any to copy.
On a website
Book a slot
New
This is your colour with a whole screen to fill.
This paragraph is here so you can see real text on a real background, which is where half of the pretty palettes fall over. If it's hard to read, now you know. And this is a link.
Book a slot
A card
Secondary surfaces use the support colour. If it doesn't separate from the background, the hierarchy is gone.
And the footer, which nobody looks at until it looks wrong.
Measured, before and after
On the plate, the best pair of colours reads at 8.4:1: AAA, reads with room to spare.
On screen, the text #21232e on the background #e1faf7 gives 14.3:1: AAA, reads with room to spare. APCA gives Lc 97: good for small text, the kind you read a paragraph of.
The accent #958a67 stands 3.1:1 from the background (a button needs 3:1) and as a link reaches 4.5:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #e1faf7 on 60% of the screen, #abf5ed on 30% (cards, bands, headers) and #958a67 on 10%, only on buttons and links. A colour loses force the more surface it covers; what looks intense on the plate softens at full screen.
*
Text
Body text goes in #21232e, a near-neutral ink tinted with the palette's hue, even though the plate had a pair that read: a saturated colour as text tires by the third line. The book's colour enters through the heading, in #003e83, where size forgives.
*
The button
The accent #958a67 stands 3.1:1 apart from the background: it works as a button, with text in #21232e.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #abf5ed leads, and the accent #958a67 is the first thing the eye will look for.
*
How many
Three colours is the comfortable measure: background, text and one accent. Don't add a fourth unless it earns its place by contrast or by hue.
*
In the dictionary
In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the mixed-light ones: it already brings hierarchy. Keep it on screen: lightest at the back, darkest in front.
Goethe's reading
What this combination conveys, and why.
Wada tells you which colours go together. Goethe, a century earlier, explains why a combination means something or means nothing, and what each colour does depending on how much of the screen it takes. His circle has six colours and three oppositions, and every verdict below carries the paragraph it comes from.
What it conveys, by where each colour landed
The palette crosses both sides of the circle, active and passive. It carries the most tension and most needs one of the two to lead.
Surface · green
Green is where the eye rests. Goethe says whoever looks at it neither wishes nor is able to imagine anything beyond it, which is why it was the colour for rooms you live in. In an interface that is precisely a background. § 802
Accent · yellow
Yellow points, but it loses the moment the ground stops being smooth and bright. On screen that means shadows, gradients and small type on top. § 771
Heading · blue
Blue recedes, and an accent is asked to do the opposite. As a link it only has to be distinguishable; as a primary button it needs contrast to do the work the colour will not. § 781
How each pair reads on the circle
Adjacent
Adjacent on the circle, with nothing between them. Ordinary and agreeable: it says little, and it does not offend. § 829
Characteristic
Yellow and blue, with green skipped. Goethe finds it poor: red is missing, and the nearness of green leaves it slight. § 819
Adjacent
Adjacent on the circle. This is the one pair Goethe dismisses outright, and that judgement does not hold today — teal is well liked. What does hold is the measurable half: two neighbours with no difference in lightness produce no contrast. § 829
Criteria taken from Zur Farbenlehre (1810), in Eastlake's 1840 translation, which is public domain. The explanations are ours: from a book you take the substance, not the wording. The light values usually credited to Goethe for working out surface proportions are not in the Farbenlehre — they are Itten's, 1961, and that is how they are credited in the adaptation rules.
The kit for building itNine tints, states, alerts and dark mode
A brand needs four colours; an interface needs a good deal more. This is what you'd otherwise invent by hand once you take four hex codes into the editor.
Nine tints of the accent
50#f9f6f0
100#efebe0
200#ddd7c6
300#c6bea5
400#ada384
500#958a67
600#796f4e
700#5f573a
800#464029
900#2f2a18
Greys, tinted with your hue
50#f7f6f5
100#ecebe8
200#d9d7d3
300#c0beb8
400#a6a39b
500#8c8980
600#726f67
700#5a5750
800#42403a
900#2b2a26
Button states
Normal#958a67
Hover#837856
Pressed#6f674c
Disabled#d3d0ca
Focus#9b8a46
Success, warning, error and info
Success#457942
Warning#9e8b48
Error#a45747
Info#3670ac
And in dark
The same colour, at night.
The background isn't pure black: it carries a little of your hue. That's what separates a designed dark mode from one that looks like a fault.
It contains a colour very close to yours (Ecru) and has been in use for almost a century. The original colours are called Hay's Russet · Ecru · Olive Ocher · Dark Medici Blue.
The plate, as printed
4 colours in equal parts, as in the book. It is the inspiration, not the interface. Click one to copy it.
Adapted for screen
The same hue as the plate with the lightness moved to where an interface needs it: the background rests, the surface keeps the colour from the book and the accent earns the button. Each role says which colour it comes from and what was done to it. Click any to copy.
On a website
Book a slot
New
This is your colour with a whole screen to fill.
This paragraph is here so you can see real text on a real background, which is where half of the pretty palettes fall over. If it's hard to read, now you know. And this is a link.
Book a slot
A card
Secondary surfaces use the support colour. If it doesn't separate from the background, the hierarchy is gone.
And the footer, which nobody looks at until it looks wrong.
Measured, before and after
On the plate, the best pair of colours reads at 6.3:1: AA, it reads.
On screen, the text #2e201e on the background #fbf5e4 gives 14.4:1: AAA, reads with room to spare. APCA gives Lc 97: good for small text, the kind you read a paragraph of.
The accent #417777 stands 4.7:1 from the background (a button needs 3:1) and as a link reaches 4.7:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #fbf5e4 on 60% of the screen, #d1bd19 on 30% (cards, bands, headers) and #417777 on 10%, only on buttons and links. A colour loses force the more surface it covers; what looks intense on the plate softens at full screen.
*
Text
Body text goes in #2e201e, a near-neutral ink tinted with the palette's hue, even though the plate had a pair that read: a saturated colour as text tires by the third line. The book's colour enters through the heading, in #681916, where size forgives.
*
The button
The accent #417777 stands 4.7:1 apart from the background: it works as a button, with text in #f9f6ef.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #d1bd19 leads, and the accent #417777 is the first thing the eye will look for.
*
How many
Four colours demand discipline: #d1bd19 and #681916 are the base, the other two are detail. If in doubt, drop the support colour before the accent.
*
In the dictionary
In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the pale ones: muted tones that get along; running text needs an ink from outside, near black.
Goethe's reading
What this combination conveys, and why.
Wada tells you which colours go together. Goethe, a century earlier, explains why a combination means something or means nothing, and what each colour does depending on how much of the screen it takes. His circle has six colours and three oppositions, and every verdict below carries the paragraph it comes from.
What it conveys, by where each colour landed
The whole palette sits on the active side of the circle: the colours that advance, warm and push outward.
Surface · yellow
Yellow across a large surface is a gamble. It is the least forgiving colour: the slightest drift towards green turns gold into dirt, and on screen that drift is supplied by compression or a gradient. § 770
Accent · green
Green is the colour of rest, so as an accent it points at nothing: the eye accepts it and moves on. If this palette needs something to stop the eye, this is not it. § 802
Heading · red
Red is the high point of the active side. In a small patch it does exactly what an accent is for: stopping the eye once. § 793
How each pair reads on the circle
Characteristic
Yellow and red, with orange skipped between them. The characteristic pair he thinks best: serene and magnificent. § 820
Characteristic
Yellow and red, with orange skipped between them. The characteristic pair he thinks best: serene and magnificent. § 820
Opposite
Opposite on the circle: together they complete what the eye asks for on its own. It is the only category Goethe approves without reservation. § 810
Same sector
Both fall in the same sector of the circle. There is no hue contrast, so whatever separates them will have to be lightness. § 832
This verdict is ours. Goethe judges four of the six pairs in this group and says so himself, or one of the two colours sits right between two sectors of the circle.
Adjacent
Adjacent on the circle, with nothing between them. Ordinary and agreeable: it says little, and it does not offend. § 829
Adjacent
Adjacent on the circle, with nothing between them. Ordinary and agreeable: it says little, and it does not offend. § 829
Criteria taken from Zur Farbenlehre (1810), in Eastlake's 1840 translation, which is public domain. The explanations are ours: from a book you take the substance, not the wording. The light values usually credited to Goethe for working out surface proportions are not in the Farbenlehre — they are Itten's, 1961, and that is how they are credited in the adaptation rules.
The kit for building itNine tints, states, alerts and dark mode
A brand needs four colours; an interface needs a good deal more. This is what you'd otherwise invent by hand once you take four hex codes into the editor.
Nine tints of the accent
50#f0f8f8
100#dfeeee
200#c3dcdc
300#a2c5c4
400#7dabab
500#5c9292
600#417777
700#305e5e
800#204646
900#112e2e
Greys, tinted with your hue
50#f5f7f7
100#e8ecec
200#d2d8d8
300#b7c0c0
400#9aa5a5
500#7e8b8b
600#667272
700#4f5959
800#394241
900#252b2b
Button states
Normal#417777
Hover#2f6566
Pressed#2b5353
Disabled#abb4b3
Focus#127b7b
Success, warning, error and info
Success#457942
Warning#9e8b48
Error#a45747
Info#3670ac
And in dark
The same colour, at night.
The background isn't pure black: it carries a little of your hue. That's what separates a designed dark mode from one that looks like a fault.
Your colour and the one opposite it on the wheel, plus a light neutral and a dark version for background and text. For brands that want attention: the accent jumps out because the eye reads it as the opposite of everything else.
The plate, as printed
The colours the rule gives, raw and in equal parts. It is the starting point, not the interface. Click one to copy it.
Adapted for screen
The same hue as the plate with the lightness moved to where an interface needs it: the background rests, the surface keeps the colour from the book and the accent earns the button. Each role says which colour it comes from and what was done to it. Click any to copy.
On a website
Book a slot
New
This is your colour with a whole screen to fill.
This paragraph is here so you can see real text on a real background, which is where half of the pretty palettes fall over. If it's hard to read, now you know. And this is a link.
Book a slot
A card
Secondary surfaces use the support colour. If it doesn't separate from the background, the hierarchy is gone.
And the footer, which nobody looks at until it looks wrong.
Measured, before and after
On the plate, the best pair of colours reads at 6.3:1: AA, it reads.
On screen, the text #21232c on the background #f5f5f5 gives 14.4:1: AAA, reads with room to spare. APCA gives Lc 97: good for small text, the kind you read a paragraph of.
The accent #96896a stands 3.2:1 from the background (a button needs 3:1) and as a link reaches 4.5:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #f5f5f5 on 60% of the screen, #ffffff on 30% (cards, bands, headers) and #96896a on 10%, only on buttons and links. A colour loses force the more surface it covers; what looks intense on the plate softens at full screen.
*
Text
Body text goes in #21232c, a near-neutral ink tinted with the palette's hue, even though the plate had a pair that read: a saturated colour as text tires by the third line. The book's colour enters through the heading, in #445f98, where size forgives.
*
The button
The accent #96896a stands 3.2:1 apart from the background: it works as a button, with text in #21232c.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #ffffff leads, and the accent #96896a is the first thing the eye will look for.
*
How many
Four colours demand discipline: #ffffff and #445f98 are the base, the other two are detail. If in doubt, drop the support colour before the accent.
Goethe's reading
What this combination conveys, and why.
Wada tells you which colours go together. Goethe, a century earlier, explains why a combination means something or means nothing, and what each colour does depending on how much of the screen it takes. His circle has six colours and three oppositions, and every verdict below carries the paragraph it comes from.
What it conveys, by where each colour landed
The palette crosses both sides of the circle, active and passive. It carries the most tension and most needs one of the two to lead.
Accent · yellow
Yellow points, but it loses the moment the ground stops being smooth and bright. On screen that means shadows, gradients and small type on top. § 771
Heading · blue
Blue recedes, and an accent is asked to do the opposite. As a link it only has to be distinguishable; as a primary button it needs contrast to do the work the colour will not. § 781
How each pair reads on the circle
Characteristic
Yellow and blue, with green skipped. Goethe finds it poor: red is missing, and the nearness of green leaves it slight. § 819
With a neutral
Next to white, a colour from the active side loses force. § 831
Characteristic
Yellow and blue, with green skipped. Goethe finds it poor: red is missing, and the nearness of green leaves it slight. § 819
With a neutral
Next to white, a colour from the passive side gains in liveliness. § 831
Same sector
Both fall in the same sector of the circle. There is no hue contrast, so whatever separates them will have to be lightness. § 832
This verdict is ours. Goethe judges four of the six pairs in this group and says so himself, or one of the two colours sits right between two sectors of the circle.
With a neutral
Next to white, a colour from the passive side gains in liveliness. § 831
Criteria taken from Zur Farbenlehre (1810), in Eastlake's 1840 translation, which is public domain. The explanations are ours: from a book you take the substance, not the wording. The light values usually credited to Goethe for working out surface proportions are not in the Farbenlehre — they are Itten's, 1961, and that is how they are credited in the adaptation rules.
The kit for building itNine tints, states, alerts and dark mode
A brand needs four colours; an interface needs a good deal more. This is what you'd otherwise invent by hand once you take four hex codes into the editor.
Nine tints of the accent
50#f9f6f1
100#efebe1
200#ded6c7
300#c7bda8
400#aea287
500#96896a
600#7a6e51
700#60563d
800#473f2b
900#2f291a
Greys, tinted with your hue
50#f7f6f5
100#ecebe8
200#d9d7d3
300#c1beb8
400#a6a39b
500#8d8880
600#736f67
700#5a5750
800#42403a
900#2c2a26
Button states
Normal#96896a
Hover#847759
Pressed#70664f
Disabled#d2d0ca
Focus#9e8849
Success, warning, error and info
Success#457942
Warning#9e8b48
Error#a45747
Info#3670ac
And in dark
The same colour, at night.
The background isn't pure black: it carries a little of your hue. That's what separates a designed dark mode from one that looks like a fault.
Your colour and its two neighbours on the wheel, plus a neutral that lets them breathe. For calm brands: everything looks like one family and nothing shouts.
The plate, as printed
The colours the rule gives, raw and in equal parts. It is the starting point, not the interface. Click one to copy it.
Adapted for screen
The same hue as the plate with the lightness moved to where an interface needs it: the background rests, the surface keeps the colour from the book and the accent earns the button. Each role says which colour it comes from and what was done to it. Click any to copy.
On a website
Book a slot
New
This is your colour with a whole screen to fill.
This paragraph is here so you can see real text on a real background, which is where half of the pretty palettes fall over. If it's hard to read, now you know. And this is a link.
Book a slot
A card
Secondary surfaces use the support colour. If it doesn't separate from the background, the hierarchy is gone.
And the footer, which nobody looks at until it looks wrong.
Measured, before and after
On the plate, the best pair of colours reads at 2.0:1: does not read.
On screen, the text #282221 on the background #f5f5f5 gives 14.4:1: AAA, reads with room to spare. APCA gives Lc 97: good for small text, the kind you read a paragraph of.
The accent #96896a stands 3.2:1 from the background (a button needs 3:1) and as a link reaches 4.5:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #f5f5f5 on 60% of the screen, #ffffff on 30% (cards, bands, headers) and #96896a on 10%, only on buttons and links. A colour loses force the more surface it covers; what looks intense on the plate softens at full screen.
*
Text
No pair on the plate read as text (the best gave 1.9:1). That is why body text goes in #282221, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #96896a stands 3.2:1 apart from the background: it works as a button, with text in #282221.
*
Temperature
All warm: close and unified, but to make something stand out don't rely on colour, rely on light: the important thing darker or lighter than its surroundings.
*
How many
Four colours demand discipline: #ffffff and #8b6860 are the base, the other two are detail. If in doubt, drop the support colour before the accent.
Goethe's reading
What this combination conveys, and why.
Wada tells you which colours go together. Goethe, a century earlier, explains why a combination means something or means nothing, and what each colour does depending on how much of the screen it takes. His circle has six colours and three oppositions, and every verdict below carries the paragraph it comes from.
What it conveys, by where each colour landed
The whole palette sits on the active side of the circle: the colours that advance, warm and push outward.
Accent · yellow
Yellow points, but it loses the moment the ground stops being smooth and bright. On screen that means shadows, gradients and small type on top. § 771
How each pair reads on the circle
With a neutral
Next to white, a colour from the active side loses force. § 831
With a neutral
Next to white, a colour from the active side loses force. § 831
With a neutral
A neutral with a colour that has no side on the circle. Goethe has nothing to say here. § 831
Same sector
Both fall in the same sector of the circle. There is no hue contrast, so whatever separates them will have to be lightness. § 832
This verdict is ours. Goethe judges four of the six pairs in this group and says so himself, or one of the two colours sits right between two sectors of the circle.
With a neutral
Next to white, a colour from the active side loses force. § 831
With a neutral
Next to white, a colour from the active side loses force. § 831
Criteria taken from Zur Farbenlehre (1810), in Eastlake's 1840 translation, which is public domain. The explanations are ours: from a book you take the substance, not the wording. The light values usually credited to Goethe for working out surface proportions are not in the Farbenlehre — they are Itten's, 1961, and that is how they are credited in the adaptation rules.
The kit for building itNine tints, states, alerts and dark mode
A brand needs four colours; an interface needs a good deal more. This is what you'd otherwise invent by hand once you take four hex codes into the editor.
Nine tints of the accent
50#f9f6f1
100#efebe1
200#ded6c7
300#c7bda8
400#aea287
500#96896a
600#7a6e51
700#60563d
800#473f2b
900#2f291a
Greys, tinted with your hue
50#f7f6f5
100#ecebe8
200#d9d7d3
300#c1beb8
400#a6a39b
500#8d8880
600#736f67
700#5a5750
800#42403a
900#2c2a26
Button states
Normal#96896a
Hover#847759
Pressed#70664f
Disabled#d2d0ca
Focus#9e8849
Success, warning, error and info
Success#457942
Warning#9e8b48
Error#a45747
Info#3670ac
And in dark
The same colour, at night.
The background isn't pure black: it carries a little of your hue. That's what separates a designed dark mode from one that looks like a fault.
One hue in three lights and a small accent opposite it. The one studios use most: the brand is recognised by one colour and the accent does the work of pointing at buttons and links.
The plate, as printed
The colours the rule gives, raw and in equal parts. It is the starting point, not the interface. Click one to copy it.
Adapted for screen
The same hue as the plate with the lightness moved to where an interface needs it: the background rests, the surface keeps the colour from the book and the accent earns the button. Each role says which colour it comes from and what was done to it. Click any to copy.
On a website
Book a slot
New
This is your colour with a whole screen to fill.
This paragraph is here so you can see real text on a real background, which is where half of the pretty palettes fall over. If it's hard to read, now you know. And this is a link.
Book a slot
A card
Secondary surfaces use the support colour. If it doesn't separate from the background, the hierarchy is gone.
And the footer, which nobody looks at until it looks wrong.
Measured, before and after
On the plate, the best pair of colours reads at 3.6:1: only good for large text.
On screen, the text #28231a on the background #f5f5f5 gives 14.3:1: AAA, reads with room to spare. APCA gives Lc 97: good for small text, the kind you read a paragraph of.
The accent #778bb2 stands 3.1:1 from the background (a button needs 3:1) and as a link reaches 4.8:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #f5f5f5 on 60% of the screen, #ffffff on 30% (cards, bands, headers) and #778bb2 on 10%, only on buttons and links. A colour loses force the more surface it covers; what looks intense on the plate softens at full screen.
*
Text
No pair on the plate read as text (the best gave 3.6:1). That is why body text goes in #28231a, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #778bb2 stands 3.1:1 apart from the background: it works as a button, with text in #28231a.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #ffffff leads, and the accent #778bb2 is the first thing the eye will look for.
*
How many
Four colours demand discipline: #ffffff and #856b2f are the base, the other two are detail. If in doubt, drop the support colour before the accent.
Goethe's reading
What this combination conveys, and why.
Wada tells you which colours go together. Goethe, a century earlier, explains why a combination means something or means nothing, and what each colour does depending on how much of the screen it takes. His circle has six colours and three oppositions, and every verdict below carries the paragraph it comes from.
What it conveys, by where each colour landed
The palette crosses both sides of the circle, active and passive. It carries the most tension and most needs one of the two to lead.
Accent · blue
Blue recedes, and an accent is asked to do the opposite. As a link it only has to be distinguishable; as a primary button it needs contrast to do the work the colour will not. § 781
Heading · yellow
Yellow points, but it loses the moment the ground stops being smooth and bright. On screen that means shadows, gradients and small type on top. § 771
How each pair reads on the circle
Same sector
Both fall in the same sector of the circle. There is no hue contrast, so whatever separates them will have to be lightness. § 832
This verdict is ours. Goethe judges four of the six pairs in this group and says so himself, or one of the two colours sits right between two sectors of the circle.
With a neutral
Next to white, a colour from the active side loses force. § 831
Characteristic
Yellow and blue, with green skipped. Goethe finds it poor: red is missing, and the nearness of green leaves it slight. § 819
With a neutral
Next to white, a colour from the active side loses force. § 831
Characteristic
Yellow and blue, with green skipped. Goethe finds it poor: red is missing, and the nearness of green leaves it slight. § 819
With a neutral
Next to white, a colour from the passive side gains in liveliness. § 831
Criteria taken from Zur Farbenlehre (1810), in Eastlake's 1840 translation, which is public domain. The explanations are ours: from a book you take the substance, not the wording. The light values usually credited to Goethe for working out surface proportions are not in the Farbenlehre — they are Itten's, 1961, and that is how they are credited in the adaptation rules.
The kit for building itNine tints, states, alerts and dark mode
A brand needs four colours; an interface needs a good deal more. This is what you'd otherwise invent by hand once you take four hex codes into the editor.
Nine tints of the accent
50#f4f6fd
100#e6ebf7
200#cfd7eb
300#b2beda
400#93a3c6
500#778bb2
600#5c7095
700#465877
800#324059
900#1f2a3d
Greys, tinted with your hue
50#f6f6f8
100#eaebee
200#d5d7db
300#bcbec4
400#a0a3ab
500#858991
600#6c6f78
700#54575e
800#3e4045
900#282a2e
Button states
Normal#778bb2
Hover#65799f
Pressed#586886
Disabled#ced1d7
Focus#5c8cd1
Success, warning, error and info
Success#457942
Warning#9e8b48
Error#a45747
Info#3670ac
And in dark
The same colour, at night.
The background isn't pure black: it carries a little of your hue. That's what separates a designed dark mode from one that looks like a fault.
In 1933 a Japanese painter and costume designer, Sanzō Wada, published a dictionary of colour combinations: 348 palettes meant for dyers, weavers and designers, drawn from years of working with real colour rather than a wheel. Almost a century later it still sits on the desk of many studios, ours included. We read it cover to cover, checked every value against the original and gave its 158 colours a name in Spanish.
Combinations based on Sanzō Wada's system (Haishoku Sōkan, 1933-34; Seigensha selection, 2010). Colour values are checked against that edition; the Spanish names, each combination's character and the explanations are ours.
If it is for your brand, this is what we do: custom websites that start with colour and end in code.
