The colour that reaches the eye fastest, and therefore the easiest to ruin: put everywhere, it stops meaning anything.
What goes with red
Red needs the least surface to be noticed. Red across half a screen isn't intense, it's exhausting; the same red on 5 % of the surface is a brand. Two families behave differently: warm reds, with orange inside, which say energy and food; and cool reds, with blue, which say luxury and drama.
The best thing beside it is a large neutral: cream, bone, stone grey, black. If a third is needed, olive green and navy are the two safe bets — the first because it's its softened complement, the second because it adds depth without arguing over the lead. Wada almost never puts two reds together, which is good advice.
There's a screen trap: red is also the colour of errors. If your accent is red, your error messages need a different red — darker or duller — or people won't know whether something broke. And pure red on black vibrates: if your brand runs dark, move towards coral or tile.
Five to start with
Five palettes with red, 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 246
It contains a colour very close to yours (Brick Red) and has been in use for almost a century. The original colours are called Corinthian Pink · Brick Red · Sulphur Yellow · Cinnamon Buff.
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.7:1: AA, it reads.
On screen, the text #2e211c on the background #f7f6e4 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 #c570a2 stands 3.1:1 from the background (a button needs 3:1) and as a link reaches 4.7:1 (a word needs 4.5:1).
Under Deuteranopia, your accent and your background drop to 2.9:1. The button stops standing out: give it a border, change the lightness, or don't rely on colour alone to mark it.
How to use it
*
Proportion
Distribute, don't equalise: #f7f6e4 on 60% of the screen, #e4e4a8 on 30% (cards, bands, headers) and #c570a2 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 #2e211c, 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 #a32100, where size forgives.
*
The button
The accent #c570a2 stands 3.1:1 apart from the background: it works as a button, with text in #2e211c.
*
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: #e4e4a8 and #a32100 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 tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. 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 · 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 · violet
The violet that would be intolerable as a background works in a border or a button. Same colour, different dose: this is a rule about surface, not about hue. § 790
Heading · orange
Orange in a small patch is the accent that needs no explaining: it advances, it is seen, and it does not need size to do it. § 775
How each pair reads on the circle
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
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
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
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 no colour between them to keep them apart. They are saved by proportion: one has to lead and the other to follow. § 828
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 no colour between them to keep them apart. They are saved by proportion: one has to lead and the other to follow. § 828
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.
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#fff3fa
100#fee4f2
200#f6cce2
300#e8adce
400#d78cb7
500#c570a2
600#a55484
700#853f69
800#642c4e
900#451b35
Greys, tinted with your hue
50#f8f6f7
100#edeaec
200#dbd6d8
300#c3bcc0
400#aaa1a5
500#90868b
600#766d72
700#5d5559
800#453e42
900#2e292b
Button states
Normal#c570a2
Hover#b15e90
Pressed#99507b
Disabled#ddced6
Focus#db5eac
Success, warning, error and info
Success#407a3e
Warning#9f8a40
Error#a95543
Info#2670b3
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 (Brick Red) and has been in use for almost a century. The original colours are called Spectrum Red · Brick Red · Blue Violet · Eupatorium Purple.
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 1.7:1: does not read.
On screen, the text #2e211c on the background #fef1ff gives 14.2:1: AAA, reads with room to spare. APCA gives Lc 96: good for small text, the kind you read a paragraph of.
The accent #e01406 stands 4.5: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: #fef1ff on 60% of the screen, #d750f7 on 30% (cards, bands, headers) and #e01406 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.7:1). That is why body text goes in #2e211c, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #e01406 stands 4.5:1 apart from the background: it works as a button, with text in #faf5fb.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #d750f7 leads, and the accent #e01406 is the first thing the eye will look for.
*
How many
Four colours demand discipline: #d750f7 and #a32100 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 tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. It is one of the dense ones: loaded colours that need plenty of air around them; less is more.
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 · violet
Goethe puts it bluntly: a large surface of pure violet would be intolerable. It holds up here because the screen adaptation has taken the chroma down. On the plate, at full saturation, it would not. § 790
Accent and Heading · orange
Orange in a small patch is the accent that needs no explaining: it advances, it is seen, and it does not need size to do it. § 775
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.
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
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.
What is happening to this palette
4 colours at full strength and almost the same lightness. Motley is not having many colours: it is having them all talk at once with nothing deciding the order. § 898
There is nowhere for the eye to rest: no neutral, no muted colour, no green. The whole palette asks for attention at once. § 802
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#f6f6f6
100#ebebeb
200#d7d7d7
300#fdaa94
400#fd7e60
500#fc4326
600#e01406
700#b10902
800#820e02
900#551001
Greys, tinted with your hue
50#f8f6f5
100#eeeae9
200#dcd6d4
300#c5bcba
400#aba19e
500#928683
600#786d6a
700#5f5553
800#463e3c
900#2e2927
Button states
Normal#e01406
Hover#c20100
Pressed#9f0f04
Disabled#d0ada4
Focus#e01607
Success, warning, error and info
Success#0b7f21
Warning#a28a0d
Error#c93625
Info#0470ba
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 10.4:1: AAA, reads with room to spare.
On screen, the text #202425 on the background #fbf3f3 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 #b4271f stands 5.9:1 from the background (a button needs 3:1) and as a link reaches 5.9:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #fbf3f3 on 60% of the screen, #dccfce on 30% (cards, bands, headers) and #b4271f 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 #202425, 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 #072729, where size forgives.
*
The button
The accent #b4271f stands 5.9:1 apart from the background: it works as a button, with text in #f8f6f6.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #dccfce leads, and the accent #b4271f is the first thing the eye will look for.
*
How many
Four colours demand discipline: #dccfce and #072729 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 · 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
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
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 black, a colour from the active side gains energy. § 831
With a neutral
A neutral with a colour that has no side on the circle. Goethe has nothing to say here. § 831
With a neutral
A neutral with a colour that has no side on the circle. Goethe has nothing to say here. § 831
With a neutral
A neutral with a colour that has no side on the circle. Goethe has nothing to say here. § 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#f6f6f6
100#ffe5e0
200#feccc1
300#fda998
400#fe7d67
500#ea5946
600#c83e30
700#b4271f
800#7c1b14
900#570c05
Greys, tinted with your hue
50#f8f6f5
100#eeeae9
200#dcd6d5
300#c5bcbb
400#aba19f
500#928684
600#786d6b
700#5f5553
800#463e3d
900#2e2927
Button states
Normal#b4271f
Hover#9e0a10
Pressed#810409
Disabled#b59b95
Focus#bf0714
Success, warning, error and info
Success#0f7f22
Warning#a38a00
Error#c53b29
Info#0070bb
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 4.5:1: only good for large text.
On screen, the text #2f201d on the background #fcf3f2 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 #b41f62 stands 5.8:1 from the background (a button needs 3:1) and as a link reaches 5.8:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #fcf3f2 on 60% of the screen, #e1d3d2 on 30% (cards, bands, headers) and #b41f62 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 4.5:1). That is why body text goes in #2f201d, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #b41f62 stands 5.8:1 apart from the background: it works as a button, with text in #f9f6f5.
*
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: #e1d3d2 and #b4271f 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 and 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
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 no colour between them to keep them apart. They are saved by proportion: one has to lead and the other to follow. § 828
With a neutral
Next to white, a colour from the active side loses force. § 831
Adjacent
Adjacent on the circle, with no colour between them to keep them apart. They are saved by proportion: one has to lead and the other to follow. § 828
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#f6f6f6
100#ffe4eb
200#ffc9d8
300#ffa4c0
400#f87aa5
500#e6548b
600#c63872
700#b41f62
800#7a1542
900#56072b
Greys, tinted with your hue
50#f8f6f6
100#eeeaeb
200#dcd6d7
300#c4bcbe
400#aba1a3
500#928689
600#786d70
700#5e5557
800#463e40
900#2e282a
Button states
Normal#b41f62
Hover#9c0351
Pressed#7f0341
Disabled#b49ca2
Focus#ba0862
Success, warning, error and info
Success#167e24
Warning#a28a08
Error#be4430
Info#1b70b7
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 9.9:1: AAA, reads with room to spare.
On screen, the text #292221 on the background #fff2f1 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 #02787e stands 4.8:1 from the background (a button needs 3:1) and as a link reaches 4.6:1 (a word needs 4.5:1).
How to use it
*
Proportion
Distribute, don't equalise: #fff2f1 on 60% of the screen, #deb9b7 on 30% (cards, bands, headers) and #02787e 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 #292221, 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 #310b09, where size forgives.
*
The button
The accent #02787e stands 4.8:1 apart from the background: it works as a button, with text in #fdf5f4.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #deb9b7 leads, and the accent #02787e is the first thing the eye will look for.
*
How many
Four colours demand discipline: #deb9b7 and #310b09 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 · 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
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
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
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
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
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
A neutral with a colour that has no side on the circle. Goethe has nothing to say here. § 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#ecf9fa
100#d9eff1
200#b9dee0
300#91c8cb
400#64afb4
500#37969c
600#02787e
700#076166
800#05474b
900#012f32
Greys, tinted with your hue
50#f5f7f7
100#e8ecec
200#d2d8d9
300#b7c0c0
400#9aa5a6
500#7e8b8c
600#657273
700#4e595a
800#394142
900#252b2c
Button states
Normal#02787e
Hover#04656a
Pressed#065357
Disabled#a6b2b2
Focus#07787e
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.
