Technically it's a dark, low-chroma orange. Emotionally it's wood, leather, coffee and bread, which is a hard CV to beat.
What goes with brown
Brown doesn't exist in the rainbow: it's what happens when you drop the lightness and chroma of an orange or a red. That's why everything that goes with wood goes with brown, and why browns get on so well with each other — same family at different heights.
Anything earthy suits it — beige, cream, sand, terracotta — and green suits it surprisingly well, because that pairing exists in a field and the eye recognises it without thinking. Navy with brown is the classic leather-and-denim combination. To lift it without betraying it, a muted gold or a mustard; never anything electric, which next to brown reads as plastic.
If you work with wood — furniture, joinery, interiors, hospitality — brown isn't a brand choice, it's the colour of your product. Let the palette accompany it rather than compete: light cream or bone backgrounds, very dark type and a single accent. And in print, add a touch of ink: light browns lose body on paper.
Five to start with
Five palettes with brown, 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 160
It contains a colour very close to yours (Pale Raw Umber) and has been in use for almost a century. The original colours are called Sulphine Yellow · Pale Raw Umber · Dark Medici 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 3.8:1: only good for large text.
On screen, the text #f1eee4 on the background #2a2013 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 #417777 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 3.0: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: #2a2013 on 60% of the screen, #5e4017 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
No pair on the plate read as text (the best gave 3.8:1). That is why body text goes in #f1eee4, a near-neutral ink tinted with the palette's hue: it is not in the book, and it is needed.
*
The button
The accent #417777 stands 3.1:1 apart from the background: it works as a button, with text in #fcf5ef.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #5e4017 leads, and the accent #417777 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 dark ones: it needs light text and large surfaces; in small pieces it clogs.
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 · orange
Orange fills a surface with energy and never lets go. It works if the rest of the palette keeps quiet; otherwise it tires before the first screenful is over. § 775
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 · 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
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.
Adjacent
Adjacent on the circle, with nothing between them. Ordinary and agreeable: it says little, and it does not offend. § 829
Characteristic
Characteristic by geometry — there is a colour skipped between the two. But Goethe judges only four pairs in this group, and this is not one of them. § 823
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#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#538989
Pressed#709999
Disabled#353c3b
Focus#127b7b
Success, warning, error and info
Success#83b87e
Warning#cbb570
Error#ea9582
Info#7daef0
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.
It contains a colour very close to yours (Pale Raw Umber) and has been in use for almost a century. The original colours are called Cinnamon Buff · Pale Raw Umber · Pale King'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 7.7:1: AAA, reads with room to spare.
On screen, the text #29231c on the background #e1faf7 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 #b77f31 stands 3.2: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: #e1faf7 on 60% of the screen, #abf5ed on 30% (cards, bands, headers) and #b77f31 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 #29231c, 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 #5e4017, where size forgives.
*
The button
The accent #b77f31 stands 3.2:1 apart from the background: it works as a button, with text in #29231c.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #abf5ed leads, and the accent #b77f31 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 whole palette sits on the active side of the circle: the colours that advance, warm and push outward.
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 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
Characteristic by geometry — there is a colour skipped between the two. But Goethe judges only four pairs in this group, and this is not one of them. § 823
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
Characteristic by geometry — there is a colour skipped between the two. But Goethe judges only four pairs in this group, and this is not one of them. § 823
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#fff5ea
100#fee7d1
200#f4d1ad
300#e3b683
400#ce9957
500#b77f31
600#986518
700#794e08
800#5b3901
900#3c2500
Greys, tinted with your hue
50#f7f6f5
100#edebe8
200#dad7d3
300#c3bdb8
400#a9a29c
500#8f8881
600#756e68
700#5c5650
800#443f3a
900#2d2926
Button states
Normal#b77f31
Hover#a36d1f
Pressed#8c5d16
Disabled#dbcec2
Focus#bf7c00
Success, warning, error and info
Success#307c32
Warning#a18a2c
Error#b34d3a
Info#1170b8
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 11.2:1: AAA, reads with room to spare.
On screen, the text #eeeeee on the background #212222 gives 13.7:1: AAA, reads with room to spare. APCA gives Lc 94: good for small text, the kind you read a paragraph of.
The accent #956242 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 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: #212222 on 60% of the screen, #000101 on 30% (cards, bands, headers) and #956242 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 #eeeeee, 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 #bebebe, where size forgives.
*
The button
The accent #956242 stands 3.1:1 apart from the background: it works as a button, with text in #f6f6f6.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #000101 leads, and the accent #956242 is the first thing the eye will look for.
*
How many
Four colours demand discipline: #000101 and #eeeeee 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 · 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
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
With a neutral
Next to black, a colour from the active side gains energy. § 831
With a neutral
Next to white, a colour from the passive side gains in liveliness. § 831
With a neutral
Next to black, a colour from the passive side loses. § 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#fff4ef
100#fae7dd
200#efd1c0
300#dfb69e
400#ca997b
500#b37d5b
600#956242
700#784d32
800#5a3822
900#3d2413
Greys, tinted with your hue
50#f8f6f5
100#edeae9
200#dbd6d3
300#c4bdb9
400#aaa19d
500#918782
600#776e69
700#5e5651
800#453f3b
900#2e2926
Button states
Normal#956242
Hover#a97353
Pressed#b88769
Disabled#413834
Focus#a55a27
Success, warning, error and info
Success#83b87e
Warning#cbb570
Error#ea9582
Info#7daef0
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 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 5.4:1: AA, it reads.
On screen, the text #eeeeee on the background #311c1d 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 #956242 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 Protanopia, 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: #311c1d on 60% of the screen, #7a2b34 on 30% (cards, bands, headers) and #956242 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 #eeeeee, 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 #c3c3c3, where size forgives.
*
The button
The accent #956242 stands 3.1:1 apart from the background: it works as a button, with text in #fff4f4.
*
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: #7a2b34 and #eeeeee 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.
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 · 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
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
Yellow and red, with orange skipped between them. The characteristic pair he thinks best: serene and magnificent. § 820
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
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
#7a2b34 and #7a4a2b are neighbours on the circle and only 7 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
#7a4a2b and #7a722b are neighbours on the circle and only 11 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#fff4ef
100#fae7dd
200#efd1c0
300#dfb69e
400#ca997b
500#b37d5b
600#956242
700#784d32
800#5a3822
900#3d2413
Greys, tinted with your hue
50#f8f6f5
100#edeae9
200#dbd6d3
300#c4bdb9
400#aaa19d
500#918782
600#776e69
700#5e5651
800#453f3b
900#2e2926
Button states
Normal#956242
Hover#a97353
Pressed#b88769
Disabled#413834
Focus#a55a27
Success, warning, error and info
Success#83b87e
Warning#cbb570
Error#ea9582
Info#7daef0
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.
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.7:1: AAA, reads with room to spare.
On screen, the text #efedec on the background #222121 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 #3b7197 stands 3.1: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.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: #222121 on 60% of the screen, #090503 on 30% (cards, bands, headers) and #3b7197 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 #efedec, 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 #beb1a9, where size forgives.
*
The button
The accent #3b7197 stands 3.1:1 apart from the background: it works as a button, with text in #f7f6f6.
*
Temperature
Warm and cool together: let one lead and the other point. Here the background #090503 leads, and the accent #3b7197 is the first thing the eye will look for.
*
How many
Four colours demand discipline: #090503 and #efedec 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
How each pair reads on the circle
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
Next to black, a colour from the passive side loses. § 831
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 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#f0f7fe
100#e0ecf9
200#c5daed
300#a4c2dd
400#7ea8cb
500#5b8eb6
600#3b7197
700#2d5b7c
800#1d435d
900#0e2c40
Greys, tinted with your hue
50#f5f7f8
100#e9ebed
200#d4d8db
300#babfc4
400#9da4aa
500#828a91
600#697077
700#52585e
800#3c4045
900#272a2e
Button states
Normal#3b7197
Hover#4f83aa
Pressed#6b94b6
Disabled#33393e
Focus#0173a6
Success, warning, error and info
Success#83b87e
Warning#cbb570
Error#ea9582
Info#7daef0
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.
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.
