color-schemer 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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...)"
|