• Stars
    star
    376
  • Rank 113,810 (Top 3 %)
  • Language
    CSS
  • Created about 13 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A sassy way to build color schemes

Color Schemer Gem Version

Color schemes made easy with Sass

Color schemer is a robust color toolset for Sass. It expands on the existing Sass color functions and adds things like RYB manipulation, * set-hue, * set-lightness, tint, shade and more. It also leverages these tools adding a full-featured color scheming tool that allows you to set one primary color and create whole color schemes around it.

Install

gem install color-schemer in your terminal.

require 'color-schemer' to your Compass config file.

@import 'color-schemer' to your stylesheet.

Using Color Schemer

New color functions

  • tint($color, $amount) — Mixes the color with white. Most designers are much more comfortable with this than lighten().
  • shade($color, $amount) — Same as above but adds black. Designers might prefer it over darken().
  • equalize($color) — Returns a fully saturated color.
  • set-red($color, $red) — Sets the amount of red in a color.
  • set-green($color, $green) — Sets the amount of green in a color.
  • set-blue($color, $blue) — Sets the amount of blue in a color.
  • set-hue($color, $hue) — Sets the hue of a color.
  • set-saturation($color, $saturation) — Sets the saturation of a color.
  • set-lightness($color, $lightness) — Sets the lightness of a color.
  • set-alpha($color, $alpha) — Sets the alpha of a color.

RYB color functions

Color schemer adds a number of functions to manipulate the red yellow and blue color wheel. Computer color is calculated in red green and blue which is more technically correct but artists and designers have been using RYB for ages to come up with better color relationships.

  • ryb-hue($color) — Will find the hue of a color on the RYB color wheel.
  • set-ryb-hue($color, $hue) — Sets the hue of a color based on the RYB color wheel.
  • ryb-adjust-hue($color, $degrees) — Will adjust the hue of a color around the RYB color wheel.
  • ryb-complement($color) — Finds the RYB complement of a color.
  • ryb-invert($color) — Inverts a color around the RYB color wheel.

CMYK color function

  • cmyk($cyan, $magenta, $yellow, $black) — Define colors using CMYK values.

Color scheming

functions

Drop these functions in wherever you want to use a color from the scheme. You can manipulate them further to make them work with your design. These should be considered a good starting point as you might want to tweak a little further.

  • cs-primary() — primary color.
  • cs-secondary() — secondary color.
  • cs-tertiary() — tertiary color.
  • cs-quadrary() — quadrary color.

Variables

You can change the result of the functions above by setting these global variables:

  • $cs-primary — set the primary color in a color scheme.
  • $cs-scheme — mono, complement, triad, tetrad, analogic, accented-analogic
  • $cs-hue-offset — Amount of hue adjustment in schemes.
  • $cs-brightness-offset — Amount of brightness adjustment in schemes.
  • $cs-color-model — rgb, ryb

Blend modes

Color schemer includes SCSS Blend Modes which allows you to do photoshop style blending of colors.

Out of the box

While you can use these functions out of the box you might want to fine-tune them a bit more. I suggest you create variables with them just in case you want to make adjustments/move things around instead of relying on these as-is.

$primary: cs-primary();
$secondary: darken(cs-secondary(), 10%); // too light, darkening this up a bit.
$tertiary: cs-tertiary();
$quadrary: cs-quadrary();

Testing your color scheme

Also included is a handy mixin to test out color schemes. Just include it with a list of your colors and it will add a bar of color above your page.

@include cs-test(red green blue);

Inspiration

License

Copyright (c) 2011 Scott Kellum (@scottkellum) and Mason Wendell (@canarymason)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

breakpoint

Really simple media queries in Sass
CSS
2,091
star
2

Singularity

Grids without limits
CSS
1,504
star
3

toolkit

Toolkit for Responsive Web Design and Progressive Enhancement with Compass
CSS
912
star
4

SassyLists

SCSS
275
star
5

jacket

Conditional Styles with Sass. Dress you CSS appropriately.
CSS
232
star
6

animation-studio

Compass extension for creating advanced animations in CSS
JavaScript
184
star
7

Sassy-math

Complex math functions for Sass
CSS
164
star
8

node-sass-import-once

Eyeglass style Import Once, but for all the things!
CSS
94
star
9

Sassy-Maps

Map helper functions for Sass 3.3 and up
CSS
66
star
10

sass-a11y

Accessibility helpers for Sass
CSS
56
star
11

Singularity-extras

singularity-extras
CSS
49
star
12

SUCKS

It's an idea, it's a way of working, it's full of stars. No really, it's about Sass'd Up Consistently Killer Styles. OOCSS, SMACSS and BEM only take you so far. Let's turn it up to 11 and change the world forever!
42
star
13

Sassy-Strings

Advanced string handling for Sass
Ruby
41
star
14

Compass-Extension-Template

A generic template for creating a Compass extension
Ruby
38
star
15

sassytextshadow

Sassy Text Shadow is a Sass mixin that calculates convoluted curvy shadows for css3 text-shadow. It can also be used for box-shadow if you're into that kind of thing.
Ruby
33
star
16

Style-Sites

A responsive style page for style tiles and generating a style guide
JavaScript
32
star
17

navigator

A Ruby testing framework for Sass with Compass
Ruby
12
star
18

generator-compass-extension

Yeoman Generator to create Compass Extensions
JavaScript
11
star
19

uikit

Beautiful and flexable UIs with Sass and Compass
Ruby
9
star
20

canisass

A website to show what features are available in each version of Sass
8
star
21

griddle

Simple set of abstractions for CSS Grid
CSS
6
star
22

try

Sass Mixins for designing in the browser
CSS
2
star
23

yolo

lulz
CSS
2
star
24

Compass-Test-Suite

A generic test suite for Compass extensions
Ruby
1
star