Skip to content

Commit

Permalink
style: Update color tool banner image and project name
Browse files Browse the repository at this point in the history
  • Loading branch information
@FelixLuciano
FelixLuciano committed Jul 7, 2024
1 parent 04a8441 commit a2415b6
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 40 deletions.
63 changes: 39 additions & 24 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">

<script>
<!-- <script>
if ('serviceWorker' in navigator)
window.addEventListener('load', () => navigator.serviceWorker.register('/service-worker.js'))
</script>
</script> -->
<script type="importmap">
{ "imports": {
"alpinejs": "https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.11.1/module.esm.min.js"
Expand Down Expand Up @@ -133,7 +133,7 @@ <h1>picker</h1>
</div>
</template>
<nav class="grid">
<div x-bind="getDisplayBind('color')" class="s12 l6 field round border ratio-3-1" style="background-color: #FFFFFF;">
<div x-bind="getDisplayBind('color')" class="s12 l6 field round border ratio-3-1 smooth-color" style="background-color: #FFFFFF;">
<span class="helper font-mono surface">hex</span>
<input type="text" value="#FFFFFF" x-ref="colorInput" x-model="hex" class="font-mono text-extra">
<button class="circle large transparent absolute middle right">
Expand All @@ -144,10 +144,10 @@ <h1>picker</h1>
<div class="s m s12"></div>
<nav class="s8 l4 field ratio-2-1 no-space">
<span class="helper font-mono">complementary (±137°)</span>
<button @click="setColor(complementary1)" x-bind="getDisplayBind('complementary1')" x-text="complementary1.hex" class="responsive w-half h-full p-0 no-elevate left-round font-mono text-medium">#FFFFFF</button>
<button @click="setColor(complementary2)" x-bind="getDisplayBind('complementary2')" x-text="complementary2.hex" class="responsive w-half h-full p-0 no-elevate right-round font-mono text-medium">#FFFFFF</button>
<button @click="setColor(complementary1)" x-bind="getDisplayBind('complementary1')" x-text="complementary1.hex" class="responsive w-half h-full p-0 no-elevate left-round font-mono text-medium smooth-color">#FFFFFF</button>
<button @click="setColor(complementary2)" x-bind="getDisplayBind('complementary2')" x-text="complementary2.hex" class="responsive w-half h-full p-0 no-elevate right-round font-mono text-medium smooth-color">#FFFFFF</button>
</nav>
<div class="s4 l2 field fill round ratio-square">
<div class="s4 l2 field fill round ratio-square smooth-color">
<span class="helper font-mono">random</span>
<button @click="setRandomColor()" x-bind="getDisplayBind('randomColor')" x-text="randomColor.hex" class="responsive h-full m-0 no-elevate font-mono text-medium">#FFFFFF</button>
</div>
Expand Down Expand Up @@ -178,21 +178,21 @@ <h1>picker</h1>
<span class="helper font-mono">hue:<b x-text="Math.round(hue) + '°'">180°</b></span>
<label class="slider max vertical" :style="{color: hueDisplay.hex}">
<input x-model.number="hue" type="range" min="0" max="360" step="1" value="180">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
<div class="s4 l2 field fill round ratio-square">
<span class="helper font-mono">chroma:<b x-text="Math.round(chroma * 100)">0</b></span>
<label class="slider max vertical" :style="{color: chromaDisplay.hex}">
<input x-model.number="chroma" type="range" min="0" max="1" :step="1/100" value="0">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
<div class="s4 l2 field fill round ratio-square">
<span class="helper font-mono">light:<b x-text="Math.round(light * 100)">100</b></span>
<label class="slider max vertical" style="color: currentcolor;">
<input x-model.number="light" type="range" min="0" max="1" :step="1/100">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
</nav>
Expand All @@ -205,40 +205,49 @@ <h2>color blindness</h2>
<nav class="grid">
<div class="s4 m2 field fill round ratio-2-1">
<span class="helper font-mono">normal</span>
<button @click="setColor(color)" x-bind="getDisplayBind('color')" x-text="color.hex" class="responsive h-full m-0 font-mono text-medium">#FFFFFF</button>
<button @click="setColor(color)" x-bind="getDisplayBind('color')" x-text="color.hex" class="responsive h-full m-0 font-mono text-medium smooth-color">#FFFFFF</button>
</div>
<div class="s4 m2 field fill round ratio-2-1">
<span class="helper font-mono">deuteranopia</span>
<button @click="setColor(deuteranopia)" x-bind="getDisplayBind('deuteranopia')" x-text="deuteranopia.hex" class="responsive h-full m-0 font-mono text-medium">#FFFFFF</button>
<button @click="setColor(deuteranopia)" x-bind="getDisplayBind('deuteranopia')" x-text="deuteranopia.hex" class="responsive h-full m-0 font-mono text-medium smooth-color">#FFFFFF</button>
</div>
<div class="s4 m2 field fill round ratio-2-1">
<span class="helper font-mono">protanopia</span>
<button @click="setColor(protanopia)" x-bind="getDisplayBind('protanopia')" x-text="protanopia.hex" class="responsive h-full m-0 font-mono text-medium">#FFFFFF</button>
<button @click="setColor(protanopia)" x-bind="getDisplayBind('protanopia')" x-text="protanopia.hex" class="responsive h-full m-0 font-mono text-medium smooth-color">#FFFFFF</button>
</div>
<div class="s m s12"></div>
<div class="s4 m2 field fill round ratio-2-1">
<span class="helper font-mono">tritanopia</span>
<button @click="setColor(tritanopia)" x-bind="getDisplayBind('tritanopia')" x-text="tritanopia.hex" class="responsive h-full m-0 font-mono text-medium">#FFFFFF</button>
<button @click="setColor(tritanopia)" x-bind="getDisplayBind('tritanopia')" x-text="tritanopia.hex" class="responsive h-full m-0 font-mono text-medium smooth-color">#FFFFFF</button>
</div>
<div class="s4 m2 field fill round ratio-2-1">
<span class="helper font-mono">achromatomaly</span>
<button @click="setColor(achromatomaly)" x-bind="getDisplayBind('achromatomaly')" x-text="achromatomaly.hex" class="responsive h-full m-0 font-mono text-medium">#FFFFFF</button>
<button @click="setColor(achromatomaly)" x-bind="getDisplayBind('achromatomaly')" x-text="achromatomaly.hex" class="responsive h-full m-0 font-mono text-medium smooth-color">#FFFFFF</button>
</div>
<div class="s4 m2 field fill round ratio-2-1">
<span class="helper font-mono">achromatopsia</span>
<button @click="setColor(achromatopsia)" x-bind="getDisplayBind('achromatopsia')" x-text="achromatopsia.hex" class="responsive h-full m-0 font-mono text-medium">#FFFFFF</button>
<button @click="setColor(achromatopsia)" x-bind="getDisplayBind('achromatopsia')" x-text="achromatopsia.hex" class="responsive h-full m-0 font-mono text-medium smooth-color">#FFFFFF</button>
</div>
</nav>
<div class="medium-space"></div>
<div class="medium-divider"></div>
</section>

<section>
<h2>accessibility</h2>
<header class="transparent p-0">
<nav>
<h2>accessibility</h2>
<div class="max"></div>
<button @click="enhanceContrast()" class="transparent small-round vertical">
<i>flare</i>
<span>enhance</span>
</button>
</nav>
</header>
<nav class="grid">
<div class="s12 m6 field fill round ratio-3-1">
<span class="helper font-mono">preview (click to swap)</span>
<button @click="swapBackgroundForegroud()" class="responsive h-full font-mono" :style="{'background-color': background.hex, color: foreground.hex}" style="--color: #CCCCCC; color: #333333; margin: 0">
<button @click="swapBackgroundForegroud()" class="responsive h-full font-mono smooth-color" :style="{'background-color': background.hex, color: foreground.hex}" style="--color: #CCCCCC; color: #333333; margin: 0">
<i class="fill extra">change_history</i>
<i class="extra">change_history</i>
<i class="fill extra">square</i>
Expand All @@ -250,12 +259,18 @@ <h2>accessibility</h2>
<div class="s m s12"></div>
<nav class="s8 m4 field ratio-2-1 no-space">
<span class="helper font-mono">subject</span>
<button @click="setBackgroundColor()" x-bind="getDisplayBind('background')" class="responsive w-half h-full p-0 left-round text-medium">background</button>
<button @click="setForegroundColor()" x-bind="getDisplayBind('foreground')" class="responsive w-half h-full p-0 right-round text-medium">foreground</button>
<button @click="setBackgroundColor()" x-bind="getDisplayBind('background')" class="responsive w-half h-full p-0 left-round text-medium smooth-color" style="position: relative;">background</button>
<button @click="setForegroundColor()" x-bind="getDisplayBind('foreground')" class="responsive w-half h-full p-0 right-round text-medium smooth-color">foreground</button>
<button @click="setColor(background)" x-bind="getDisplayBind('background')" class="circle absolute bottom left transparent margin smooth-color" style="z-index: 2;">
<i>colorize</i>
</button>
<button @click="setColor(foreground)" x-bind="getDisplayBind('foreground')" class="circle absolute bottom right transparent margin smooth-color" style="z-index: 2;">
<i>colorize</i>
</button>
</nav>
<div class="s4 m2 field fill round ratio-square">
<span class="helper font-mono">grade <strong x-text="contrastDisplay">65:8</strong></span>
<button class="responsive h-full m-0 font-mono text-extra center-text" x-bind="getDisplayBind('contrastGradeDisplay')" x-text="contrastGrade">AAA</button>
<button x-bind="getDisplayBind('contrastGradeDisplay')" x-text="contrastGrade" class="responsive h-full m-0 font-mono text-extra center-text smooth-color">AAA</button>
</div>
</nav>
<div class="medium-space"></div>
Expand Down Expand Up @@ -298,14 +313,14 @@ <h2>fades</h2>
<span class="helper font-mono">darken chroma:<b x-text="Math.round(darkChroma * 100)">100</b></span>
<label class="slider max vertical" :style="{color: darkChromaDisplay.hex}">
<input x-model.number="darkChroma" type="range" min="-1" max="1" :step="1/100">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
<div class="s4 l2 field fill round ratio-square">
<span class="helper font-mono">darkness:<b x-text="Math.round(darkLevel * 100)">100</b></span>
<label class="slider max vertical" style="color: currentcolor;">
<input x-model.number="darkLevel" type="range" min="0" max="1" :step="1/100">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
<div class="s12"></div>
Expand All @@ -321,14 +336,14 @@ <h2>fades</h2>
<span class="helper font-mono">lighten hue:<b x-text="lightHue">0</b></span>
<label class="slider max vertical" :style="{color: lightHueDisplay.hex}">
<input x-model.number="lightHue" type="range" min="-360" max="360">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
<div class="s4 l2 field fill round ratio-square">
<span class="helper font-mono">lighten chroma:<b x-text="Math.round(lightChroma * 100)">100</b></span>
<label class="slider max vertical" :style="{color: lightChromaDisplay.hex}">
<input x-model.number="lightChroma" type="range" min="-1" max="1" :step="1/100">
<span></span>
<span class="smooth-color"></span>
</label>
</div>
<div class="s4 l2 field fill round ratio-square">
Expand Down
45 changes: 29 additions & 16 deletions public/picker.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,18 +150,33 @@ export function picker() {
[0.299, 0.587, 0.114],
])
},
background: Color.fromHex('#CCCCCC'),
foreground: Color.fromHex('#333333'),

background: Color.fromHex('#333333'),
foreground: Color.fromHex('#cccccc'),
setBackgroundColor() {
this.background = this.color.copy()
},
setForegroundColor() {
this.foreground = this.color.copy()
this.foreground = this.color
},
swapBackgroundForegroud() {
[this.background, this.foreground] = [this.foreground, this.background]
},
enhanceContrast() {
let target = 3
let step = 0.01

if (this.contrast >= target) target = 4.5
if (this.contrast >= target) target = 7
if (this.background.getContrast(WHITE) < this.background.getContrast(BLACK)) step = -0.01

for (let light = this.foreground.light; this.contrast < target && light >= 0.0 && light <= 1.0; light += step) {
this.foreground = Color.fromHsv(this.foreground.hue, this.foreground.chroma, light)
}
for (let chroma = this.foreground.chroma; this.contrast < target && chroma >= 0.0 && chroma <= 1.0; chroma -= step) {
this.foreground = Color.fromHsv(this.foreground.hue, chroma, this.foreground.light)
}
},

get contrast() {
return this.background.getContrast(this.foreground)
Expand Down Expand Up @@ -190,13 +205,13 @@ export function picker() {
darkChroma: 1.0,
darkLevel: 0.8,
get darkFade() {
let hue = (this.hue + this.darkHue) % 361
let hue = this.hue + this.darkHue
const saturation = this.darkChroma < 0 ? this.chroma * (this.darkChroma + 1) : this.chroma + (1 - this.chroma) * this.darkChroma
const value = this.light * (1 - this.darkLevel)

if (hue < 0) {
hue += 360
}
// if (hue < 0) {
// hue += 360
// }

return Color.fromHsv(hue, saturation, value)
},
Expand All @@ -211,13 +226,14 @@ export function picker() {
lightChroma: -0.8,
lightLevel: 1.0,
get lightFade() {
let hue = (this.hue + this.lightHue) % 361
let hue = this.hue + this.lightHue
// let hue = (this.hue + this.lightHue) % 361
const saturation = this.lightChroma < 0 ? this.chroma * (this.lightChroma + 1) : this.chroma + (1 - this.chroma) * this.lightChroma
const value = this.light + (1 - this.light) * this.lightLevel

if (hue < 0) {
hue += 360
}
// if (hue < 0) {
// hue += 360
// }

return Color.fromHsv(hue, saturation, value)
},
Expand All @@ -235,10 +251,6 @@ export function picker() {
const dChroma = c2.chroma - c1.chroma
const dLight = c2.light - c1.light

if (dHue < 0) {
dHue += 360
}

return function (x) {
const hue = (x * dHue + c1.hue) % 361
const chroma = x * dChroma + c1.chroma
Expand Down Expand Up @@ -395,6 +407,7 @@ export function picker() {
init() {
this.color.hue = 300
this.randomColor = getRandomColor()
this.foreground = this.color
},
}

Expand Down

0 comments on commit a2415b6

Please sign in to comment.