color-schemer 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/color-schemer.gemspec +2 -2
- data/stylesheets/_color-schemer.sass +94 -3
- metadata +2 -2
data/color-schemer.gemspec
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Gem::Specification.new do |s|
|
|
4
4
|
s.name = %q{color-schemer}
|
|
5
|
-
s.version = "0.1.
|
|
5
|
+
s.version = "0.1.1"
|
|
6
6
|
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
|
8
8
|
s.authors = ["Scott Kellum", "Mason Wendell"]
|
|
@@ -18,7 +18,7 @@ Gem::Specification.new do |s|
|
|
|
18
18
|
s.homepage = %q{https://github.com/scottkellum/color-schemer}
|
|
19
19
|
s.require_paths = ["lib"]
|
|
20
20
|
s.rubyforge_project = %q{color-schemer}
|
|
21
|
-
s.rubygems_version = %q{0.1.
|
|
21
|
+
s.rubygems_version = %q{0.1.1}
|
|
22
22
|
s.summary = %q{Create color schemes with ease.}
|
|
23
23
|
s.add_dependency(%q<compass>, ["~> 0.11"])
|
|
24
24
|
end
|
|
@@ -13,11 +13,90 @@ $base-color: #f00 !default
|
|
|
13
13
|
$color-scheme: mono !default
|
|
14
14
|
$hue-offset: 20 !default
|
|
15
15
|
$brightness-offset: 10% !default
|
|
16
|
+
$color-theory: rgb !default
|
|
16
17
|
|
|
17
18
|
// Normalizer credit to Mason Wendell: https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass
|
|
18
19
|
@function equalize($color)
|
|
19
20
|
@return hsl(hue($color), 100%, 50%)
|
|
20
21
|
|
|
22
|
+
// Complement based on Claude Boutet's color wheel
|
|
23
|
+
@function boutet-complement($color)
|
|
24
|
+
$hue: round(hue($color)/ 10) // find and round hue
|
|
25
|
+
// Manually adjusted values until these can be mathmatically explained.
|
|
26
|
+
@if $hue == 0
|
|
27
|
+
@return adjust-hue(invert($color), -60) // Start with red
|
|
28
|
+
@if $hue == 1
|
|
29
|
+
@return adjust-hue(invert($color), -50)
|
|
30
|
+
@if $hue == 2
|
|
31
|
+
@return adjust-hue(invert($color), -40)
|
|
32
|
+
@if $hue == 3
|
|
33
|
+
@return adjust-hue(invert($color), -25)
|
|
34
|
+
@if $hue == 4
|
|
35
|
+
@return adjust-hue(invert($color), 0)
|
|
36
|
+
@if $hue == 5
|
|
37
|
+
@return adjust-hue(invert($color), 25)
|
|
38
|
+
@if $hue == 6
|
|
39
|
+
@return adjust-hue(invert($color), 38)
|
|
40
|
+
@if $hue == 7
|
|
41
|
+
@return adjust-hue(invert($color), 44)
|
|
42
|
+
@if $hue == 8
|
|
43
|
+
@return adjust-hue(invert($color), 52)
|
|
44
|
+
@if $hue == 9
|
|
45
|
+
@return adjust-hue(invert($color), 58)
|
|
46
|
+
@if $hue == 10
|
|
47
|
+
@return adjust-hue(invert($color), 59)
|
|
48
|
+
@if $hue == 11
|
|
49
|
+
@return adjust-hue(invert($color), 60)
|
|
50
|
+
@if $hue == 12
|
|
51
|
+
@return adjust-hue(invert($color), 60) // Green is halfway through the Boutet scale.
|
|
52
|
+
@if $hue == 13
|
|
53
|
+
@return adjust-hue(invert($color), 55)
|
|
54
|
+
@if $hue == 14
|
|
55
|
+
@return adjust-hue(invert($color), 50)
|
|
56
|
+
@if $hue == 15
|
|
57
|
+
@return adjust-hue(invert($color), 45)
|
|
58
|
+
@if $hue == 16
|
|
59
|
+
@return adjust-hue(invert($color), 40)
|
|
60
|
+
@if $hue == 17
|
|
61
|
+
@return adjust-hue(invert($color), 35)
|
|
62
|
+
@if $hue == 18
|
|
63
|
+
@return adjust-hue(invert($color), 30)
|
|
64
|
+
@if $hue == 19
|
|
65
|
+
@return adjust-hue(invert($color), 25)
|
|
66
|
+
@if $hue == 20
|
|
67
|
+
@return adjust-hue(invert($color), 20)
|
|
68
|
+
@if $hue == 21
|
|
69
|
+
@return adjust-hue(invert($color), 15)
|
|
70
|
+
@if $hue == 22
|
|
71
|
+
@return adjust-hue(invert($color), -5)
|
|
72
|
+
@if $hue == 23
|
|
73
|
+
@return adjust-hue(invert($color), -8)
|
|
74
|
+
@if $hue == 24
|
|
75
|
+
@return adjust-hue(invert($color), -17)
|
|
76
|
+
@if $hue == 25
|
|
77
|
+
@return adjust-hue(invert($color), -25)
|
|
78
|
+
@if $hue == 26
|
|
79
|
+
@return adjust-hue(invert($color), -30)
|
|
80
|
+
@if $hue == 27
|
|
81
|
+
@return adjust-hue(invert($color), -35)
|
|
82
|
+
@if $hue == 28
|
|
83
|
+
@return adjust-hue(invert($color), -40)
|
|
84
|
+
@if $hue == 29
|
|
85
|
+
@return adjust-hue(invert($color), -43)
|
|
86
|
+
@if $hue == 30
|
|
87
|
+
@return adjust-hue(invert($color), -46)
|
|
88
|
+
@if $hue == 31
|
|
89
|
+
@return adjust-hue(invert($color), -49)
|
|
90
|
+
@if $hue == 32
|
|
91
|
+
@return adjust-hue(invert($color), -52)
|
|
92
|
+
@if $hue == 33
|
|
93
|
+
@return adjust-hue(invert($color), -54)
|
|
94
|
+
@if $hue == 34
|
|
95
|
+
@return adjust-hue(invert($color), -57)
|
|
96
|
+
@if $hue == 35
|
|
97
|
+
@return adjust-hue(invert($color), -60)
|
|
98
|
+
|
|
99
|
+
|
|
21
100
|
@function color-schemer($color-location, $base-color, $color-scheme, $hue-offset)
|
|
22
101
|
// Primary, just return the base-color.
|
|
23
102
|
@if $color-location == primary
|
|
@@ -27,11 +106,15 @@ $brightness-offset: 10% !default
|
|
|
27
106
|
@if $color-scheme == mono
|
|
28
107
|
@return lighten($base-color, $brightness-offset)
|
|
29
108
|
@if $color-scheme == complement
|
|
30
|
-
@
|
|
109
|
+
@if $color-theory == boutet
|
|
110
|
+
@return boutet-complement($base-color)
|
|
111
|
+
@return complement($base-color)
|
|
31
112
|
@if $color-scheme == triad
|
|
113
|
+
@if $color-theory == boutet
|
|
114
|
+
@return adjust-hue(boutet-complement($base-color), $hue-offset)
|
|
32
115
|
@return adjust-hue(complement($base-color), $hue-offset)
|
|
33
116
|
@if $color-scheme == tetrad
|
|
34
|
-
@return
|
|
117
|
+
@return adjust-hue($base-color, $hue-offset)
|
|
35
118
|
@if $color-scheme == analogic
|
|
36
119
|
@return adjust-hue($base-color, $hue-offset)
|
|
37
120
|
@if $color-scheme == accented-analogic
|
|
@@ -44,9 +127,13 @@ $brightness-offset: 10% !default
|
|
|
44
127
|
@if $color-scheme == complement
|
|
45
128
|
@return lighten($base-color, $brightness-offset)
|
|
46
129
|
@if $color-scheme == triad
|
|
130
|
+
@if $color-theory == boutet
|
|
131
|
+
@return adjust-hue(boutet-complement($base-color), -$hue-offset)
|
|
47
132
|
@return adjust-hue(complement($base-color), -$hue-offset)
|
|
48
133
|
@if $color-scheme == tetrad
|
|
49
|
-
@
|
|
134
|
+
@if $color-theory == boutet
|
|
135
|
+
@return boutet-complement($base-color)
|
|
136
|
+
@return complement($base-color)
|
|
50
137
|
@if $color-scheme == analogic
|
|
51
138
|
@return adjust-hue($base-color, -$hue-offset)
|
|
52
139
|
@if $color-scheme == accented-analogic
|
|
@@ -61,10 +148,14 @@ $brightness-offset: 10% !default
|
|
|
61
148
|
@if $color-scheme == triad
|
|
62
149
|
@return darken($base-color, $brightness-offset)
|
|
63
150
|
@if $color-scheme == tetrad
|
|
151
|
+
@if $color-theory == boutet
|
|
152
|
+
@return adjust-hue(boutet-complement($base-color), $hue-offset)
|
|
64
153
|
@return adjust-hue(complement($base-color), $hue-offset)
|
|
65
154
|
@if $color-scheme == analogic
|
|
66
155
|
@return darken($base-color, $brightness-offset)
|
|
67
156
|
@if $color-scheme == accented-analogic
|
|
157
|
+
@if $color-theory == boutet
|
|
158
|
+
@return boutet-complement($base-color)
|
|
68
159
|
@return complement($base-color)
|
|
69
160
|
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
|
70
161
|
@warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
|