A red with light and little chroma. It has gone from a colour with an assigned audience to the colour people play with most, and it takes far more than expected.
What goes with pink
Pink is defined by what it lacks: a red or magenta with the lightness raised and the load taken out. Hence how many there are — dusty pink, almost a neutral; old rose, with earth inside; fuchsia, which can't be ignored; and coral, already asking to be orange.
It works best with what you don't expect: dark green, navy, burgundy. Dusty pink with bottle green is one of the most solid pairings there is, and it's old, not a trend. With warm grey and cream it stays soft without turning childish, which is the hardest line to find. Pink with black is something else entirely: hardness.
The usual caveat: light pinks almost never work as text or as an accent on white, because the contrast doesn't get there. They work as background or large surface, with the text in a very dark tone from the same family — a burgundy, a dark brown — which is what stops the palette looking like a cake.
Five to start with
Five palettes with pink, 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 203
It contains a colour very close to yours (Vinaceous Cinnamon) and has been in use for almost a century. The original colours are called Pale Lemon Yellow · Vinaceous Cinnamon · Lincoln Green.
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 7.5:1: AAA, reads with room to spare.
On screen, the text #22251b on the background #f9f5e4 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 #cc7470 stands 3.0: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.8: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: #f9f5e4 on 60% of the screen, #ede48e on 30% (cards, bands, headers) and #cc7470 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 #22251b, 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 #405416, where size forgives.
*
The button
The accent #cc7470 stands 3.0:1 apart from the background: it works as a button, with text in #22251b.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #ede48e leads, and the accent #cc7470 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 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 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 · 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
Heading · 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
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
Adjacent
Adjacent on the circle, with nothing between them. Ordinary and agreeable: it says little, and it does not offend. § 829
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.
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.
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#fff4f3
100#ffe5e3
200#faccc9
300#eeafaa
400#dd8e8a
500#cc7470
600#aa5755
700#894240
800#672f2d
900#471d1c
Greys, tinted with your hue
50#f8f6f6
100#eeeaea
200#dcd6d5
300#c5bcbb
400#aca1a0
500#928685
600#796d6c
700#5f5554
800#463e3d
900#2f2928
Button states
Normal#cc7470
Hover#b8625f
Pressed#9e5451
Disabled#e0cfce
Focus#e46463
Success, warning, error and info
Success#457942
Warning#9e8b47
Error#a55747
Info#3570ad
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 (Vinaceous Cinnamon) and has been in use for almost a century. The original colours are called Pale Burnt Lake · Vinaceous Cinnamon · Violet.
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 5.4:1: AA, it reads.
On screen, the text #f8ebea on the background #311c1c gives 13.8:1: AAA, reads with room to spare. APCA gives Lc 94: good for small text, the kind you read a paragraph of.
The accent #714bff 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: #311c1c on 60% of the screen, #730f1f on 30% (cards, bands, headers) and #714bff 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 #f8ebea, 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 #f59994, where size forgives.
*
The button
The accent #714bff stands 3.2:1 apart from the background: it works as a button, with text in #fff4f3.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #730f1f leads, and the accent #714bff 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 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 · red
Red at full surface leaves room for nothing else. It is the colour of gravity and dignity, and in a background that reads as constant weight. § 790
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 · 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
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
What is happening to this palette
#730f1f and #2619d1 are neighbours on the circle and only 5 points of lightness apart. This is the failure Goethe describes without naming it: well-chosen colours placed at the wrong value. They vibrate, and neither can be read on top of the other. § 899
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#e1d0fd
300#ccb2fc
400#b390fc
500#966eff
600#714bff
700#5739d1
800#3f27a1
900#271774
Greys, tinted with your hue
50#f7f6f8
100#ebeaed
200#d8d6db
300#bfbdc3
400#a5a2a9
500#8b8790
600#716e76
700#59565d
800#413f44
900#2b292d
Button states
Normal#714bff
Hover#8c64fc
Pressed#a17cfa
Disabled#3f364f
Focus#724cfa
Success, warning, error and info
Success#4ec251
Warning#d3b41c
Error#fd8b74
Info#6baefe
And in light
The same colour, by day.
The palette is born dark; this is its light version. The background is not pure white: it carries a little of its hue, just as the dark one was not black.
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 3.5:1: only good for large text.
On screen, the text #1a2623 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 #c07586 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).
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: #f5f5f5 on 60% of the screen, #ffffff on 30% (cards, bands, headers) and #c07586 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.5:1). That is why body text goes in #1a2623, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #c07586 stands 3.1:1 apart from the background: it works as a button, with text in #1a2623.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #ffffff leads, and the accent #c07586 is the first thing the eye will look for.
*
How many
Four colours demand discipline: #ffffff and #0e7f6a 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
Heading · 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
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
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
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
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#fff4f6
100#fde5e9
200#f4ced5
300#e6b0bb
400#d4919f
500#c07586
600#a15a6b
700#814553
800#61313d
900#431e28
Greys, tinted with your hue
50#f8f6f6
100#eeeaeb
200#dcd6d7
300#c5bcbe
400#aba0a2
500#928688
600#786d6f
700#5f5556
800#463e3f
900#2e282a
Button states
Normal#c07586
Hover#ac6374
Pressed#935563
Disabled#dbced0
Focus#da6484
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.5:1: does not read.
On screen, the text #2c2123 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 #c075ac stands 3.0:1 from the background (a button needs 3:1) and as a link reaches 4.6:1 (a word needs 4.5:1).
Under Deuteranopia, your accent and your background drop to 2.8: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: #f5f5f5 on 60% of the screen, #ffffff on 30% (cards, bands, headers) and #c075ac 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 2.5:1). That is why body text goes in #2c2123, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #c075ac stands 3.0:1 apart from the background: it works as a button, with text in #2c2123.
*
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 #9f5668 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 · 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 · 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
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
Characteristic
Orange and violet, with red skipped. It excites because it hints at pure red without ever showing it. § 822
With a neutral
Next to white, a colour from the passive side gains in liveliness. § 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
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
What is happening to this palette
#dd8fc7 and #dd8fa0 are neighbours on the circle and only 1 points of lightness apart. This is the failure Goethe describes without naming it: well-chosen colours placed at the wrong value. They vibrate, and neither can be read on top of the other. § 899
#dd8fa0 and #dda58f are neighbours on the circle and only 5 points of lightness apart. This is the failure Goethe describes without naming it: well-chosen colours placed at the wrong value. They vibrate, and neither can be read on top of the other. § 899
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#fff3fb
100#fce5f4
200#f2cde6
300#e3afd3
400#d08ebe
500#c075ac
600#9e578c
700#7f4270
800#602f53
900#421d39
Greys, tinted with your hue
50#f8f6f7
100#edeaec
200#dad6d9
300#c3bcc1
400#a9a1a6
500#8f868c
600#766d73
700#5c555a
800#443e42
900#2d292c
Button states
Normal#c075ac
Hover#ac6399
Pressed#955484
Disabled#ddd0d9
Focus#d465b9
Success, warning, error and info
Success#41793f
Warning#9f8a42
Error#a85544
Info#2a70b2
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 6.8:1: AA, it reads.
On screen, the text #2f2021 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 #3e9c8a stands 3.0:1 from the background (a button needs 3:1) and as a link reaches 4.7:1 (a word needs 4.5:1).
Under Protanopia, your accent and your background drop to 2.8: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: #f5f5f5 on 60% of the screen, #ffffff on 30% (cards, bands, headers) and #3e9c8a 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 #2f2021, 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 #a2314a, where size forgives.
*
The button
The accent #3e9c8a stands 3.0:1 apart from the background: it works as a button, with text in #2f2021.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #ffffff leads, and the accent #3e9c8a is the first thing the eye will look for.
*
How many
Four colours demand discipline: #ffffff and #a2314a 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
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
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#ecf9f6
100#d8f0ea
200#b8dfd6
300#90c9bc
400#64b1a0
500#3e9c8a
600#1a7d6d
700#036355
800#02493e
900#003029
Greys, tinted with your hue
50#f5f7f6
100#e8eceb
200#d2d8d7
300#b8c0be
400#9ba5a3
500#7f8b88
600#67726f
700#4f5957
800#3a423f
900#252b2a
Button states
Normal#3e9c8a
Hover#288978
Pressed#247667
Disabled#c9d6d3
Focus#049f89
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.
