Colour Scheme Options | Jane B. Website Help

If you do not already have a colour scheme in mind, based on your logo or branding for example, then you could use one of the suggestions below as a starting point.

Unless otherwise stated, the colour palettes are composed of a main colour, its adjacent colours and its complementary colour.

You wouldn’t have to use all the colours in the palette. For example, if you wanted a monochromatic scheme you would use the colours in one row only. For a two colour scheme, you could choose colours in two rows.

In fact, using all the colours in every row is likely to look pretty garish. In the Smashing Magazine article “A Simple Web Developer’s Color Guide“, Laura Elizabeth suggests using a base colour, an accent colour, white, dark grey and light grey. She provides a method for creating the grey colours, using Photoshop’s opacity blend mode and I found that this also worked in Paintshop Pro. However, I chose simply to adjust the saturation and lightness of the 1st colour to create greys for this colour scheme based on the 1st and 4th rows of the “Hippie Blue” palette below:

#BCDFEA

#85BDCF

#5899AF

#387E94

#206B84

#FFE5CA

#FFD1A1

#FFBF7B

#EEA354

#D4832D

#E1E2E3

#C0C3C4

#808687

#606466

#202122

It’s important not just to pick colours that you find attractive, but also to think about what those colours portray – see Smashing Magazine’s article “Color Theory for Designers, Part 1: The Meaning of Color” and Lifewire’s article “What Meanings Are Associated With the Various Colors“.

Bouquet Pink

#E4D7E0

#CAACC0

#AE809E

#93597F

#7A3A64

#FBECEE

#F7D2D6

#DAA0A6

#B86F76

#994850

#D3CDD8

#A89AB3

#877297

#6C5080

#54366A

#F4F8EA

#E7F2CD

#C4D49C

#9FB46C

#7F9546

Camelot

#CE8AA6

#A95677

#893456

#6D1A3B

#490520

#F0B0A1

#C47664

#A0503D

#7F301E

#551505

#956B9E

#774381

#5E2A69

#491553

#2F0538

#BADA93

#8BB35B

#699137

#4C731B

#2D4D05

Azelea

#ffffff

#FDE9F1

#F7C8DA

#EDA1BF

#DF78A0

#ffffff

#FFEFEB

#FFD9CE

#FFBFAE

#FFA289

#ffffff

#F7E7FA

#E4BFEB

#C891D2

#A360AF

#ffffff

#F5FEEA

#E3FACA

#CFF3A5

#B7E97E

Cerise Red

#F07E9F

#E9547F

#DE3162

#C60C41

#9B022E

#FFAA86

#FF8D5C

#F77036

#DC4B0D

#AC3503

#CD6CC9

#B441AF

#A4249E

#93098D

#72026D

#AEEE7D

#93E653

#7ADB30

#5CC30C

#449802

Pink

(tetrad scheme)

#FFF3F5

#FFDAE0

#FFC0CB

#FF8BA0

#FF5D7A

#F3FFFC

#DAFFF5

#C0FFEF

#8BFFE2

#5DFDD5

#F7FFF3

#E5FFDA

#D3FFC0

#AEFF8B

#8DFE5D

#FFF7F3

#FFE7DA

#FFD7C0

#FFB68B

#FF995D

Candy

(and triadic and complementary colours)

Use this primary colour scheme with care – possibly picking one main hue and then just small accents of the other colours.

#F15463

#E62538

#C1091B

#9E000F

#76000B

#4468A5

#26529E

#123C84

#092E6D

#052151

#F9F557

#EEE927

#C8C309

#A4A000

#7A7700

#60D049

#3DC620

#23A708

#188900

#126600

Tall Poppy

#F7827F

#D04E4A

#B32D29

#92130F

#670300

#F7B77F

#D0884A

#B36929

#924C0F

#673000

#C8679C

#A93C77

#91215E

#760C46

#53002E

#64C26A

#3AA441

#208D27

#0C7313

#005105

Melon

#FFEEEA

#FFD7CF

#FEBAAD

#D78171

#AB4E3C

#FFF5EA

#FFE8CF

#FED7AD

#D7A571

#AB753C

#F4E1E9

#E7BCCF

#D792B1

#B66086

#91335C

#D9EDE0

#ADD6BB

#7FBA93

#539D6C

#2C7D48

Apricot Peach

#FFF4EE

#FFE5D4

#FBCEB1

#D49B76

#AD6C43

#FFF9EE

#FFEFD4

#FBE0B1

#D4B276

#AD8543

#FCEAED

#F7CDD3

#EFA8B2

#CA707D

#A43F4D

#D5E5E2

#A3C4BE

#71A097

#4B887C

#2B6E61

Cedar

#A58F7B

#756354

#48392C

#402C1B

#311E0D

#A5987B

#756A54

#483F2C

#40341B

#31250D

#A57D7B

#755454

#482D2C

#401C1B

#310E0D

#4B6364

#334647

#1B2B2C

#112627

#081D1E

Coffee

#948165

#534838

#493922

#3A2A12

#261906

#948965

#534D38

#494022

#3A3012

#261F06

#947465

#534138

#492F22

#3A1F12

#261006

#445260

#262E36

#18242F

#0E1A25

#050F19

Willow Grove

#B1BDAA

#87967F

#65745D

#3F4B39

#293B20

#81908B

#60726D

#475853

#2B3935

#182D27

#CBD0BB

#9FA58C

#7A7F66

#4E523E

#3A4123

#C9B5B9

#A0878C

#7B6368

#4F3C41

#3F2228

Mint

#FCFFFD

#D3F9E1

#A6EDC0

#7ADA9E

#52C07B

#FCFEFF

#D3EDF7

#A4D4E7

#77B5CD

#4C90A9

#FEFFFC

#ECFDD6

#D9F9AF

#C5F388

#B0EB64

#FFFCFC

#FFDFD8

#FFC0B3

#FFA28F

#FF866D

Viridian

#97BFB2

#659D8B

#40826C

#266B54

#10503B

#98AABC

#678099

#44617F

#2A4968

#14314F

#C9E7B7

#A0CE85

#74AB54

#538C31

#346A14

#FFDCCA

#EBB498

#C38260

#A05B38

#793817

Morning Glory

(and complementary and split complementary colours)

#F8FEFF

#CFF3F4

#9EDDE0

#6EBFC2

#43969A

#FFFDF8

#FFF2D7

#A9BAE5

#FFDB90

#FFCF6E

#FFF8F8

#FFD8D7

#FFB5B3

#FF9390

#FF716E

#FFFBF8

#FFEAD7

#FFD6B3

#FFC390

#FFB16E

Hippie Blue

#BCDFEA

#85BDCF

#5899AF

#387E94

#206B84

#C2CAED

#919DD6

#6676BB

#4757A2

#2D3F90

#BFF0CF

#8BDDA7

#60C682

#3EAE64

#219B4A

#FFE5CA

#FFD1A1

#FFBF7B

#EEA354

#D4832D

Mariner

#729FE1

#4A82D5

#286BCD

#0C57C5

#093D8B

#8978E4

#6651D9

#4930D2

#2D11CB

#210D92

#67DFC7

#3CD3B5

#17CAA7

#00C29C

#00876C

#FFCC76

#FFBB48

#FFAC1E

#FFA100

#D38500

Chambray

#7B8FBF

#4F67A1

#354E8C

#203977

#0F255D

#8F7EC2

#6752A5

#4D378F

#38227A

#241060

#6CAFB2

#3F8D91

#277A7E

#14676B

#055154

#FFDE99

#EFC368

#D1A13F

#B18221

#8B6008

Aluminium

#FDFDFD

#D6D7DA

#A9ACB6

#84899B

#626A84

#FDFDFD

#D8D7DB

#AFABB8

#8C859D

#6D6386

#FDFDFD

#CFD3D3

#9BA6A8

#76898D

#567378

#FFFFFF

#FFFDF9

#FFF9EA

#E5D9BE

#C3B18A

Torea Bay

#4760BF

#2343BA

#0F2E9E

#0B2480

#061A62

#6A45C0

#4F21BB

#3A0D9F

#2E0981

#220563

#379BB3

#1290AD

#037590

#025F74

#01495A

#FFC749

#FFB714

#E9A200

#BC8300

#916500

Persian Indigo

#5C3EA1

#431F98

#31127A

#240963

#180445

#81359C

#721593

#5A0A76

#470360

#320143

#3F54A0

#203996

#132979

#0A1D62

#041245

#EBD44A

#DDC118

#B29A09

#907B00

#655700

The colour schemes above have been generated using Paletton.com. Colour names are based on the Chir.ag name that color project and Ingrid Sundberg’s colour thesaurus, and are included to make it easier to reference a scheme. More shades, tints and monochromatic colours to supplement any of these schemes can be found by entering a hex code into the color-hex.com website.

If you would like to design your own colour scheme then have a look at my blog post: Online Resources for Choosing a Colour Scheme, for inspiration.