ruk·si
/notes

🎨 Colors
Color Palettes

Updated at 2014-09-23 18:35

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

Common palettes:

  • 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; the main hue.
    • Add some black and white to break the dominance of the color.
    • Gives elegant look, relatively easy to use.
  • Analogous:
    • Contains colors that are right next to each other in the color wheel.
    • Easier to use.
  • Complementary:
    • Palette contains colors that are on opposite sides of the color wheel.
    • Powerful but harder to use.
  • Triadic:
    • Palette contains three colors that are equally spaced on the color wheel.
    • Powerful and pretty hard to use.
  • Double Split Complementary:
    • Choose two adjacent colors and take their complementary; how you have four hues.
    • Tough to use properly.

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 brighter highlight and others as more dull background colors.

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 five colors using the 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 four 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