1 of 19

2 of 19

Transformação de cores

com chroma.js em HSV

alexandre.lopes@cerensa.com © 2019

3 of 19

Espaços de cores

Modelos de cores

Modelo de cor RGB

Modelo de cor HSV

Modelo de cor HSL

CSS

Representação perceptual uniforme

Chroma.js

Exercício

4 of 19

Espaço de cores

"Um espaço de cores pode ser arbitrário,�com cores específicas atribuídas a um conjunto de amostras de cores físicas nomeadas ou numeradas,�tal como com o sistema Pantone, ou matematicamente estruturado, como o Adobe RGB ou sRGB."

programmingdesignsystems.com

wikipedia.com

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

5 of 19

Espaço de cores

"Um espaço de cores pode ser arbitrário,�com cores específicas atribuídas a um conjunto de amostras de cores físicas nomeadas ou numeradas,�tal como com o sistema Pantone, ou matematicamente estruturado, como o Adobe RGB ou sRGB."

programmingdesignsystems.com

wikipedia.com

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

6 of 19

Modelo de cores

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

"Um modelo de cores é um modelo matemático abstrato que descreve a forma como as cores podem ser representadas como tuplas de números

(por exemplo, triplica em RGB ou quadruplica em CMYK)"

wikipedia.com

The RGB cube represents colours in three dimensions of Red, Green and Blue. by Philippe Chassy, Neil Buckley e David Reid

rgb(255, 86, 196);

rgb(0, 128, 255);

7 of 19

Sinnerschrader RGB Color System by S2Creatives in smartv

.body {

background: hsl(0, 0, 0);

}

​

.red-ball {

background: rgb(255, 0, 0);

}

💻

How Does a Projector Works By Carolyn Guertin

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

8 of 19

. guess-these-css-colors {

background-color: #FFFFFF;

background: rgb(255, 255, 255);

}

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

9 of 19

Clarear, escurecer ou mudar uma cor com RGB

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

rgb(0, 191, 64);

rgb(0, 255, 0);

rgb(0, 128, 128);

rgb(0, 64, 191);

rgb(0, 0, 255);

rgb(51, 255, 51);

rgb(0, 255, 0);

rgb(102, 255, 102);

rgb(153, 255, 253);

rgb(204, 255, 204);

10 of 19

Mudar uma cor com RGB,�sem mudar a luminosidade ou a saturação

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

11 of 19

wikipedia

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

wikipedia

  • Próximo do funcionamento dos dispositivos de reprodução (monitores, projetores, etc);
  • Conceito do modelo é parecido com o dos espaços de cor mais comuns porque possui RGB como primárias;
  • Fácil de armazenar e reproduzir;
  • Próximo de como as pessoas percebem as cores (cones e bastonetes);
  • Conceito do modelo é diferente dos espaços de cores mais comuns porque não possui RGB como primárias;
  • Para reproduzir, em algum momento precisa ser convertido para RGB;

12 of 19

. guess-these-css-colors {

background: hsv(30, 1, 1);

}

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

13 of 19

14 of 19

wikimedia

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

15 of 19

an isometric, 3D representation of all this by RPDMS Associates Color Consulting Services

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

16 of 19

Chroma.js (docs)

"chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales."

Chroma.js Color Palette Helper

sumário

Espaços de cores

Modelos de cores

Chroma.js

Exercício

17 of 19

https://codepen.io/al-lopes/pen/OJJexGP

18 of 19

Espaços de cores

Modelos de cores

Modelo de cor RGB

Modelo de cor HSV

Modelo de cor HSL

CSS

Representação perceptual uniforme

Chroma.js

Exercício

19 of 19

Alexandre Lopes

alexandre.lopes@cerensa.com