Commit e39284b3 authored by Zéfling's avatar Zéfling 🎨

Update demo

parent 0e869918
<h1>coloration-lib</h1>
<h2>Test to change color: </h2>
<h2>Test to change color:</h2>
<main>
<form>
......@@ -17,7 +17,7 @@
<legend>Additionnal</legend>
<div class="additionnal">
<div class="luminosity">
<label> <span>Luminosity:</span><input type="number"
<label> <span>Luminosity [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
......@@ -25,15 +25,15 @@
(change)="luminosity = $event.target.value"></label>
</div>
<div class="red">
<label><span>Red:</span><input type="number"
min="-255"
<label><span>Red [-256; 256]:</span><input type="number"
min="-256"
max="256"
step="1"
[value]="red"
(change)="red = $event.target.value"></label>
</div>
<div class="green">
<label><span>Green:</span><input type="number"
<label><span>Green [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
......@@ -41,7 +41,7 @@
(change)="green = $event.target.value"></label>
</div>
<div class="blue">
<label><span>Blue:</span><input type="number"
<label><span>Blue [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
......@@ -49,7 +49,7 @@
(change)="blue = $event.target.value"></label>
</div>
<div class="hue">
<label><span>Hue (°):</span><input type="number"
<label><span>Hue [-360; 360]°:</span><input type="number"
max="-360"
max="360"
step="1"
......@@ -57,15 +57,15 @@
(change)="hue = $event.target.value"></label>
</div>
<div class="saturation">
<label><span>Saluration (%):</span><input type="number"
min="-255"
max="256"
<label><span>Saluration [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="saturation"
(change)="saturation = $event.target.value"></label>
</div>
<div class="value">
<label><span>Value (%):</span><input type="number"
<label><span>Value [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
......@@ -80,7 +80,7 @@
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
</div>
<div class="maskOpacity">
<label><span>Mask opacity:</span><input type="number"
<label><span>+ Mask opacity [0; 1]:</span><input type="number"
min="0"
max="1"
step="0.001"
......@@ -88,7 +88,7 @@
(change)="maskOpacity = $event.target.value"></label>
</div>
<div class="alpha">
<label><span>Alpha:</span><input type="number"
<label><span>Alpha [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
......@@ -121,4 +121,31 @@
</div>
</fieldset>
</aside>
</main>
\ No newline at end of file
</main>
<h2>
Supported formats:
</h2>
<ul>
<li>
<strong>CSS Color Name</strong> : <code>black</code>, <code>orange</code>
<li>
<strong>Hex Code</strong>:
<code>#000</code>,
<code>#FFF0</code>,
<code>#00FF00</code>,
<code>#00FF00FF</code>,
<li>
<strong>RGB & RGBA</strong>:
<code>rgb(0, 0, 0)</code>,
<code>rgb(0 0 0)</code>,
<code>rgb(0, 0, 0, 0.1)</code>,
<code>rgba(0, 0, 0, .1)</code>,
<code>rgba(0 0 0, .1)</code>,
<li>
<strong>HSL & HSLA</strong>:
<code>hsl(0, 0%, 0%)</code>,
<code>hsl(0, 0%, 0%, 0.1)</code>,
<code>hsla(0, 0%, 0%, .1)</code>,
<code>hsla(0 0% 0%, .1)</code>
</ul>
\ No newline at end of file
......@@ -18,9 +18,9 @@ aside {
width: 100%;
grid-template:
"lum . alpha " 35px
"color opacity . " 35px
"red green blue " 35px
"hue sat value " 35px / 1fr 1fr 1fr;
"hue sat value " 35px
"color opacity . " 35px / 1fr 1fr 1fr;
label {
display:flex;
......@@ -37,16 +37,27 @@ aside {
}
}
.luminosity { grid-area: lum; }
.luminosity { grid-area: lum; span::before{ background:linear-gradient(90deg, black, white)}}
.maskColor { grid-area: color;}
.maskOpacity{ grid-area: opacity;}
.red { grid-area: red;}
.green { grid-area: green;}
.blue { grid-area: blue;}
.hue {grid-area: hue;}
.saturation { grid-area: sat;}
.value{ grid-area: value;}
.alpha{ grid-area: alpha;}
.red { grid-area: red; span::before{ background: red;}}
.green { grid-area: green; span::before{ background: green;}}
.blue { grid-area: blue; span::before{ background: blue;}}
.hue {grid-area: hue; span::before{ background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);}}
.saturation { grid-area: sat; span::before{ background:linear-gradient(90deg, #808080, red)}}
.value{ grid-area: value; span::before{ background:linear-gradient(90deg, black, white)}}
.alpha{ grid-area: alpha; span::before{ background-color: #ddd; background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%), linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%); background-size: 5px 5px; background-position: 0 0, 2px 2px;}}
.luminosity, .red, .green, .blue, .hue, .saturation, .value, .alpha {
span::before {
content: ' ';
display: inline-block;
height: 10px;
width: 10px;
border: 1px solid black;
margin-right: 3px;
}
}
.button {
text-align: center;
......
......@@ -29,27 +29,29 @@ export class AppComponent {
constructor() { }
change() {
this.color = new Coloration(this.baseColor);
this.color.addColor({
r: this.red,
g: this.green,
b: this.blue,
h: this.hue,
s: this.saturation,
v: this.value,
luminosity: this.luminosity,
maskColor: this.maskColor,
maskOpacity: this.maskOpacity,
alpha: this.alpha
});
this.colorHex = this.color.toHEX();
this.colorHsl = this.color.toHSL();
this.colorRgb = this.color.toRGB();
if (this.baseColor) {
this.color = new Coloration(this.baseColor);
this.color.addColor({
r: this.red,
g: this.green,
b: this.blue,
h: this.hue,
s: this.saturation,
v: this.value,
luminosity: this.luminosity,
maskColor: this.maskColor,
maskOpacity: this.maskOpacity,
alpha: this.alpha
});
this.colorHex = this.color.toHEX();
this.colorHsl = this.color.toHSL();
this.colorRgb = this.color.toRGB();
}
}
get gradient() {
const hexa = this.color.toHEX();
const hexa = this.color ? this.color.toHEX() : undefined;
return this.color && hexa ? 'linear-gradient(to right, ' + this.baseColor + ', ' + hexa + ')' : this.baseColor;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment