rybitten
Version:
A color space conversion library for transforming between RGB and RYB colors.
506 lines (496 loc) • 18.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RYBitten Demo</title>
<link
href="https://fonts.cdnfonts.com/css/apple-garamond"
rel="stylesheet"
/>
</head>
<body>
<div class="layout">
<nav class="nav">
<div class="nav__inner">
<ul data-presets></ul>
<div class="navcube">
<form class="edges" data-edges2>
<svg viewBox="0 0 100 100" class="cube">
<g>
<line x1="33" y1="3" x2="6" y2="30" />
<line x1="66" y1="90" x2="93" y2="63" />
<rect
x="33"
y="3"
width="60"
height="60"
class="cube__back"
/>
<rect
x="6"
y="30"
width="60"
height="60"
class="cube__front"
/>
<polyline
points="33,30 33,63 93,63"
class="cube__coverline"
/>
</g>
</svg>
<label class="g">
<b>green</b>
<span><input data-c2="g" type="color" /></span>
</label>
<label class="b">
<b>blue</b>
<span><input data-c2="b" type="color" /></span>
</label>
<label class="black">
<b>black</b>
<span><input data-c2="0" type="color" /></span>
</label>
<label class="v">
<b>pink</b>
<span><input data-c2="v" type="color" /></span>
</label>
<label class="y">
<b>yellow</b>
<span><input data-c2="y" type="color" /></span>
</label>
<label class="w">
<b>white</b>
<span><input data-c2="w" type="color" /></span>
</label>
<label class="o">
<b>orange</b>
<span><input data-c2="o" type="color" /></span>
</label>
<label class="r">
<b>red</b>
<span><input data-c2="r" type="color" /></span>
</label>
</form>
</div>
</div>
</nav>
<div class="main">
<main>
<div class="intro block">
<div class="c">
<div class="c">
<div class="c">
<div class="c">
<div class="c"></div>
</div>
</div>
</div>
</div>
<div class="intro-text block__text">
<h1>RYBitten</h1>
<p>
Implementation of pseudo RYB color conversions derived from
Johannes Itten's color wheel.
</p>
</div>
</div>
<div class="block compare">
<div class="converter">
<label class="swatch swatch--rgb" data-rgb>
<div class="swatch__color"></div>
<div class="swatch__label">
<span class="swatch__value">0 0 0</span>
<strong class="swatch__name">White</strong>
</div>
<input id="rgb" type="color" class="swatch__input" />
</label>
<div class="swatch swatch--ryb" data-ryb>
<div class="swatch__color"></div>
<div class="swatch__label">
<span class="swatch__value">0 0 0</span>
<strong class="swatch__name">Black</strong>
</div>
</div>
</div>
<div class="block__text">
<h2>RYB Conversion</h2>
<p>
The RYB color model is a subtractive system traditionally used
in art and design, characterized by its foundational primary
colors: red, yellow, and blue. Through their combination, a rich
array of secondary colors emerges, offering a versatile palette.
In the emulated RYB color gamut, black and white are reversed
relative to the RGB model. This inversion reflects the
subtractive nature of RYB, contrasting with the additive process
in RGB.
</p>
</div>
</div>
<div class="ryb block">
<form class="edges" data-edges>
<svg viewBox="0 0 100 100" class="cube">
<g>
<line x1="33" y1="3" x2="6" y2="30" />
<line x1="66" y1="90" x2="93" y2="63" />
<rect
x="33"
y="3"
width="60"
height="60"
class="cube__back"
/>
<rect
x="6"
y="30"
width="60"
height="60"
class="cube__front"
/>
<polyline
points="33,30 33,63 93,63"
class="cube__coverline"
/>
</g>
</svg>
<label class="g">
<b>green</b>
<span><input data-c="g" type="color" /></span>
</label>
<label class="b">
<b>blue</b>
<span><input data-c="b" type="color" /></span>
</label>
<label class="black">
<b>black</b>
<span><input data-c="0" type="color" /></span>
</label>
<label class="v">
<b>pink</b>
<span><input data-c="v" type="color" /></span>
</label>
<label class="y">
<b>yellow</b>
<span><input data-c="y" type="color" /></span>
</label>
<label class="w">
<b>white</b>
<span><input data-c="w" type="color" /></span>
</label>
<label class="o">
<b>orange</b>
<span><input data-c="o" type="color" /></span>
</label>
<label class="r">
<b>red</b>
<span><input data-c="r" type="color" /></span>
</label>
</form>
<div class="block__text">
<h2>RYB Colorspace</h2>
<p>
This library employs trilinear interpolation to convert between
RGB and RYB color spaces, allowing for a flexible and
imaginative approach to color representation that remains
compatible with the RGB model.
</p>
<p>
The RGB/RYB cube is meticulously calibrated to resemble Johannes
Itten's
<a
href="https://encyclopedia.design/2023/03/06/johannes-itten-swiss-expressionist-painter-designer-teacher-writer/#jp-carousel-809511"
>chromatic circle</a
>. By adjusting the edges of the cube, you can observe how color
shifts and create custom color spaces tailored to your artistic
vision. This flexibility offers a unique perspective for
designers, artists, and developers seeking to explore new
dimensions of color.
</p>
</div>
</div>
<div class="hsl block">
<div class="hsl-wheel">
<div
class="hsl-wheel__rim hsl-wheel__rim--9"
style="--i: calc(9 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--8"
style="--i: calc(8 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--7"
style="--i: calc(7 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--6"
style="--i: calc(6 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--5"
style="--i: calc(5 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--4"
style="--i: calc(4 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--3"
style="--i: calc(3 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--2"
style="--i: calc(2 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--1"
style="--i: calc(1 / 9)"
></div>
<div
class="hsl-wheel__rim hsl-wheel__rim--0"
style="--i: calc(0 / 9)"
></div>
<i
class="hsl-wheel__label"
style="--i: calc(1 / 36); --c: var(--color-1)"
><b>10</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(2 / 36); --c: var(--color-2)"
><b>20</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(3 / 36); --c: var(--color-3)"
><b>30</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(4 / 36); --c: var(--color-4)"
><b>40</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(5 / 36); --c: var(--color-5)"
><b>50</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(6 / 36); --c: var(--color-6)"
><b>60</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(7 / 36); --c: var(--color-7)"
><b>70</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(8 / 36); --c: var(--color-8)"
><b>80</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(9 / 36); --c: var(--color-9)"
><b>90</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(10 / 36); --c: var(--color-10)"
><b>100</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(11 / 36); --c: var(--color-11)"
><b>110</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(12 / 36); --c: var(--color-12)"
><b>120</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(13 / 36); --c: var(--color-13)"
><b>130</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(14 / 36); --c: var(--color-14)"
><b>140</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(15 / 36); --c: var(--color-15)"
><b>150</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(16 / 36); --c: var(--color-16)"
><b>160</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(17 / 36); --c: var(--color-17)"
><b>170</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(18 / 36); --c: var(--color-18)"
><b>180</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(19 / 36); --c: var(--color-19)"
><b>190</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(20 / 36); --c: var(--color-20)"
><b>200</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(21 / 36); --c: var(--color-21)"
><b>210</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(22 / 36); --c: var(--color-22)"
><b>220</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(23 / 36); --c: var(--color-23)"
><b>230</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(24 / 36); --c: var(--color-24)"
><b>240</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(25 / 36); --c: var(--color-25)"
><b>250</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(26 / 36); --c: var(--color-26)"
><b>260</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(27 / 36); --c: var(--color-27)"
><b>270</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(28 / 36); --c: var(--color-28)"
><b>280</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(29 / 36); --c: var(--color-29)"
><b>290</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(30 / 36); --c: var(--color-30)"
><b>300</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(31 / 36); --c: var(--color-31)"
><b>310</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(32 / 36); --c: var(--color-32)"
><b>320</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(33 / 36); --c: var(--color-33)"
><b>330</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(34 / 36); --c: var(--color-34)"
><b>340</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(35 / 36); --c: var(--color-35)"
><b>350</b></i
>
<i
class="hsl-wheel__label"
style="--i: calc(36 / 36); --c: var(--color-36)"
><b>360</b></i
>
</div>
<div class="block__text">
<h2>RYBitten HSL</h2>
<p>
The RYBItten HSL wheel is derived by first calculating RGB
values, which are then converted to a custom RYB color space.
This dual-step process results in a unique color wheel that
reflects the principles of Johannes Itten's chromatic circle.
</p>
<p>
Utilizing the HSL model allows for seamless integration with
existing color generation libraries, providing an accessible
pathway for artists, designers, and developers to experiment
with vibrant, customized palettes. This approach ensures
compatibility with a wide range of tools while maintaining the
aesthetic characteristics of the RYB color space. For ease of
use, the lightness value is inverted to behave intuitively.
</p>
</div>
</div>
<div class="ramps block block--vertical">
<div class="block__text">
<h2>RYB-HSL Ramps</h2>
<p>
Visualizing the RYB-HSL color space as a collection of swatches
on a palette reveals the inherent harmony of these hues. They
evoke the essence of an artist's color palette, reminiscent of
classic illustrations or vintage prints. This approach
underscores the organic quality of the RYB-HSL color space,
suggesting a more natural and balanced progression of tones.
</p>
</div>
<div class="ramps__container">
<div data-ramps class="ramp-list"></div>
</div>
</div>
<div class="grad block">
<div class="gradient"></div>
<div class="block__text">
<h2>RYB Gradient</h2>
<p>
The RYB gradient showcases the smooth transition between colors
in the RYB color space. This gradient is generated by
interpolating between two colors in the RYB color space,
creating a visually appealing blend of hues.
</p>
</div>
</div>
<blockquote
cite="https://encyclopedia.design/2023/03/06/johannes-itten-swiss-expressionist-painter-designer-teacher-writer/"
>
<p>Play becomes joy, joy becomes work, work becomes play.</p>
<footer>—Johannes Itten, <cite>Bauhaus</cite></footer>
</blockquote>
</main>
<div class="smoothwheel"></div>
</div>
<!-- /.main -->
</div>
<!-- /.layout -->
<script type="module" src="./demo.ts"></script>
</body>
</html>