Posts tagged Colors


The Sass preprocessor for CSS offers a few built-in color utilities but in addition to these default helpers I always use a few custom functions that are handy whether it’s for prototyping user interface elements, integrating design comps or making color themes. In this article I’ll explain the

  • #a33438 rgb(163, 52, 56)
  • #638b97 rgb(99, 139, 151)
  • #deb48e rgb(222, 180, 142)
  • #34241d rgb(52, 36, 29)
  • #c84647 rgb(200, 70, 71)

A color theme I’ve created with the Adobe Kuler application on the iPhone. It takes a picture from the gallery or with the camera

In print design, a tint of a color is making it lighter by putting less ink, and a shade is mixing a color with black. Now with CSS preprocessors like Sass or Less we can easily compute color codes to reproduce these tints and shades. These two functions appear to

  • #71494b rgb(113, 73, 75)
  • #d5e1f3 rgb(213, 225, 243)
  • #9199a4 rgb(145, 153, 164)
  • #59708d rgb(89, 112, 141)
  • #1d92af rgb(29, 146, 175)

A color scheme I’ve created from pictures I took in Dumbo, Brooklyn area in New-York.

Adobe Kuler

The Adobe Kuler web application has a

  • #f3eccf rgb(243, 236, 207)
  • #d9c9b0 rgb(217, 201, 176)
  • #645861 rgb(100, 88, 97)
  • #8c545f rgb(140, 84, 95)
  • #2c2a37 rgb(44, 42, 55)

I must say I like designing color swatches. For this one I had the inspiration from a beautiful photography I saw on National Geographic.

Inspiration