color schemer

Schéma de couleurs

Les schémas de couleurs simplifiés avec Sass

Color Schemer est un ensemble d’outils de couleur robuste pour Sass. Il développe les fonctions de couleur Sass existantes et ajoute des éléments tels que la manipulation RYB, * définir la teinte, * définir la luminosité, la teinte, l'ombre et plus encore. Il exploite également ces outils en ajoutant un outil de palette de couleurs complet qui vous permet de définir une couleur primaire et de créer des palettes de couleurs complètes autour d'elle.

Installer

gem install color-schemer dans votre terminal.

require 'color-schemer' dans votre fichier de configuration Compass.

@import 'color-schemer' dans votre feuille de style.

Utiliser le schéma de couleurs

Nouvelles fonctions de couleur

• tint($color, $amount) — Mélange la couleur avec du blanc. La plupart des concepteurs sont beaucoup plus à l'aise avec cela qu'avec lighten() .
• shade($color, $amount) — Identique à ci-dessus mais ajoute du noir. Les concepteurs pourraient le préférer à darken() .
• equalize($color) — Renvoie une couleur entièrement saturée.
• set-red($color, $red) — Définit la quantité de rouge dans une couleur.
• set-green($color, $green) — Définit la quantité de vert dans une couleur.
• set-blue($color, $blue) — Définit la quantité de bleu dans une couleur.
• set-hue($color, $hue) — Définit la teinte d'une couleur.
• set-saturation($color, $saturation) — Définit la saturation d'une couleur.
• set-lightness($color, $lightness) — Définit la luminosité d'une couleur.
• set-alpha($color, $alpha) — Définit l'alpha d'une couleur.

Fonctions de couleur RYB

Le schéma de couleurs ajoute un certain nombre de fonctions pour manipuler la roue chromatique rouge, jaune et bleue. La couleur informatique est calculée en rouge, vert et bleu, ce qui est techniquement plus correct, mais les artistes et les designers utilisent RYB depuis des lustres pour obtenir de meilleures relations de couleurs.

• ryb-hue($color) — Trouvera la teinte d'une couleur sur la roue chromatique RYB.
• set-ryb-hue($color, $hue) — Définit la teinte d'une couleur en fonction de la roue chromatique RYB.
• ryb-adjust-hue($color, $degrees) — Ajustera la teinte d'une couleur autour de la roue chromatique RYB.
• ryb-complement($color) — Recherche le complément RYB d'une couleur.
• ryb-invert($color) — Inverse une couleur autour de la roue chromatique RYB.

Fonction de couleur CMJN

• cmyk($cyan, $magenta, $yellow, $black) — Définissez les couleurs à l'aide des valeurs CMJN.

Schéma de couleurs

fonctions

Déposez ces fonctions partout où vous souhaitez utiliser une couleur du schéma. Vous pouvez les manipuler davantage pour les faire fonctionner avec votre conception. Ceux-ci devraient être considérés comme un bon point de départ, car vous souhaiterez peut-être les modifier un peu plus.

• cs-primary() — couleur primaire.
• cs-secondary() — couleur secondaire.
• cs-tertiary() — couleur tertiaire.
• cs-quadrary() — couleur du quadraire.

Variables

Vous pouvez modifier le résultat des fonctions ci-dessus en définissant ces variables globales :

• $cs-primary — définit la couleur primaire dans un jeu de couleurs.
• $cs-scheme — mono, complément, triade, tétrade, analogique, accentué-analogique
• $cs-hue-offset — Quantité d'ajustement de teinte dans les schémas.
• $cs-brightness-offset — Quantité d'ajustement de la luminosité dans les schémas.
• $cs-color-model — RVB, ryb

Modes de fusion

Le schéma de couleurs comprend les modes de fusion SCSS qui vous permettent d'effectuer un mélange de couleurs dans le style Photoshop.

Hors de la boîte

Bien que vous puissiez utiliser ces fonctions directement, vous souhaiterez peut-être les affiner un peu plus. Je vous suggère de créer des variables avec elles au cas où vous souhaiteriez effectuer des ajustements/déplacer des éléments au lieu de vous fier à celles-ci telles quelles.

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

Tester votre palette de couleurs

Un mixin pratique est également inclus pour tester les combinaisons de couleurs. Incluez-le simplement avec une liste de vos couleurs et il ajoutera une barre de couleur au-dessus de votre page.

 @include cs-test ( red green blue );

Inspiration

• http://colorschemedesigner.com/

Licence

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

L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :

L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.

LE LOGICIEL EST FOURNI « EN L'ÉTAT », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION. EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, DE OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.