ruk·si
/notes

Colors
Color Palettes

Updated at 2014-09-23 15:35

Color palette or scheme is a set of color/hues. You rarely find websites that use only one color, and this is because using a well-planned set of colors make it easier to get sites to look professional.

  • Singular:
    • Means using only one shade of one color.
    • Reflects luxury in the product or brand.
    • Hard to use, so avoid using.
  • Monochromatic:
    • Palette contains different shades of one main color, a hue.
    • Add some black and white to break the dominance of the color.
    • Gives elegant look, easy to use.
  • Analogous:
    • Palette contains colors that are right next to each other in the color wheel.
    • Easy to use.
  • Complementary:
    • Palette contains colors that are on opposite sides of the color wheel.
    • Very powerful but harder to use.
  • Double Split Complementary:
    • Choose two adjacent colors and take their complementaries, how you have 4 hues.
  • Triadic:
    • Palette contains three colors that are equally spaced on the color wheel.
    • Powerful and pretty hard to use.

How to use a color palette: You are only allowed to use the hues that you chose for your palette and you must play with the value/brightness of the color. You'd usually use one hue as more bright highlight and others as more dull background colors. For example; with orange-cyan complementary palette, artists usually use bright orange as the highlight and use darker cyan as the background, there is no bright cyan anywhere and dull orange is only in the shadows.

How to build a color palette:

  1. You are defining 5 colors using HSL color system.
  2. Choose a base color, which is the middle color.
    • For monochromatic: Use the same hue for each color and change saturation and lightness of other 4 colors.
    • For analogous: Change the hue of non-base color to differ from the base color up to 60 degrees. Tune the palette by changing saturation and lightness.
    • For complementary: Change hue of 2 non-base colors to -180 degrees. Tune the palette by changing saturation and lightness.

Ruksi's Colors of Note

#748b83 #5b756c // Cool Forest (Green)
#427232 #254f17 // Moss (Green)
#88bd50 #62b14a // Lime (Green)
#2ecc71 #27ae60 // Emerald (Green)
#1abc9c #16a085 // Turquoise (Teal)
#2efddf #05dcd4 // Radiance (Teal)
#a7dbd8 #69d2e7 // Pond (Teal)
#a8f6ef #72b0a0 // Cyber (Teal)
#3498db #2a84c0 // Sapphire (Blue)
#1d4769 #112f47 // Navy (Blue)
#518fa5 #065e7e // Sea (Blue)
#3b536c #2e4154 // Space Navy (Blue)
#bea1d4 #523771 // Magic (Purple)
#9950b6 #8640a4 // Viola (Purple)
#b163a3 #7e4373 // Radiant Orchid (Purple)
#8a1f5d #66023c // Sea Shells (Purple)
#e7d89d #c2b48d // Cream (Yellow)
#ede574         // Banana Flesh (Yellow)
#ffd005 #e9ba0e // Banana Peel (Yellow)
#eaa809 #c46e1b // Torch (Yellow-Orange)
#fca33a #da832c // Mandarin (Orange)
#f38630 #fa6900 // Pumpkin (Orange)
#db643a #b73b1a // Carrot (Orange)
#9d837c #724e45 // Antique (Brown)
#956e33 #6d5025 // Woody (Brown)
#9c4645 #632226 // Marsala (Brown-Red)
#bd3737 #942222 // Strawberry (Red)
#f84a4a #ed1a1a // Peach (Red)
#bf0413 #930606 // Lips (Red)
#f085b3 #fd63a6 // Wild Rose (Pink)
#ff217c #e4007a // Comet (Pink)

#ecf0f1 #bdc3c7 // Whitney (White)
#95a5a6 #7f8c8d // Gary (Grey)
#454545 #2e2320 // Smooth Ink (Grey)
#16161D         // Eigengrau (Black)
#141111 #0f0d0d // Panel (Black)

#232323         // Web Heading
#484745         // Web Body
#ebe8e0         // Web Background

#d03b49         // Red error background or slim border, with white bold text

Sources