Keskustelu: Nettisivujen teko: PHP ja 20 kpl yhtä tummia värisävyjä kuin #16A7B4

Käytän PHP:tä ja tarkoitus olisi luoda taulukollinen värikoodeja. Lähtöväri on heksakoodiltaan #16A7B4 (punainen 180, vihreä 22 ja sininen 111). Kaikkien värisävyjen pitäisi olla yhtä tummia kuin #16A7B4 on, mutta värit eivät saa olla keskenään niin samanlaisia, ettei niitä erota toisistaan pikaisella silmäyksellä. Eli värit eivät saa olla liian lähellä toisiaan.

Esim. värit #164EB4 ja #38B416 ovat OK, koska ne eivät ole liian samanlaisia kuin #16A7B4. Väri #B41668 on kuitenkin epäkelpo ja liian lähellä lähtöväriä.

Mitenköhän saisin laskettua värisävyjä, jotka täyttävät vaatimukseni? Tarvitsisin 20 kpl eri värisävyjä.

Periaatteessa voisit toimia esimerkiksi niin, että arvot arvon R:lle ja G:lle ja sen jälkeen lasket sopivan B:n. Jos B on välillä 0-255 (0-FF) niin sitten arvottu väri kelpaa. Jos taas se menee alueen ulkopuolelle niin arvot uudestaan.

Sitten tietysti täytyy olla joku keino määritellä kirkkaus RGB-arvon perusteella. Tässä kolme eri tapaa, jotka eivät toki ole ainoat oikeat.

https://en.wikipedia.org/wiki/Relative_luminance
= 0.2126*R + 0.7152*G + 0.0722*B

https://www.w3.org/TR/AERT#color-contrast
=0.299*R + 0.587*G + 0.114*B

http://alienryderflex.com/hsp.html
=( 0.299*R^2 + 0.587*G^2 + 0.114*B^2 ) ^ 0.5

Toinen tapa voisi olla tehdä esim. HSV -> RGB muunnosta ja valkioida S ja V ja sitten vaan Huet tietyin välein. Useimmilla kaavoilla tosin todellinen havaittu kirkkaus ei ole vakio vaikka S ja V olisivatkin vakiot.

Kysymyksessä lienee jokin virhe, koska itse ainakin pidän punaista selvästi eri värinä kuin sinistä.

color: #16A7B4; /* alkuperäinen: sininen tai turkoosi */
color: #38B416; /* ok, vihreä */
color: #164EB4; /* ??? ok, sininen */
color: #B41668; /* ??? ei käy, punainen */

Jos nuo eivät ole tarpeeksi erilaisia, mitkä sitten? 20 väriä on jo aika paljon.

Yksi ratkaisu ongelmaan on manuaalinen: Suunnittele valmiiksi joltain kirkkaustasolta 23 sopivaa väriä, jotka toimivat hyvin myös tummennettuina ja vaalennettuina. Ohjelmassa vain skaalaa nämä värit samaan kirkkauteen kuin lähtöväri ja poista joukosta pari lähtöväriä lähinnä olevaa.

Esimerkki pienemmällä värimäärällä: Suunnitellaan värit #f66, #ff0, #6f6, #99f, #eee. Käyttäjä haluaa värejä läheltä arvoa #c60. Skaalataan värit tuohon tasoon, saadaan #c44, #cc0, #4c4, #66c, #bbb. Poistetaan RGB-koordinaattien mukaan lähimmät #c44, #cc0. Jää käyttäjän antama #c60 ja omat #4c4, #66c, #bbb.

color: #f66, #ff0, #6f6, #99f, #eee; /* omat */
color: #c60; /* syöte */
color: #c44, #cc0, #4c4, #66c, #bbb; /* skaalatut */
color: #c44, #cc0; /* lähimmät poistettavaksi */
color: #4c4, #66c, #bbb; /* tulos */
color: #c60; /* (ja syöte mukaan tulokseen) */

Grez kirjoitti:

(27.06.2017 20:19:51): Periaat­teessa voisit toimia esimerkiksi niin...

Ah, kysymys osui suoraan omalle osaamisalueelle. Jos haluat vain Saada sopivat värit, niin lopun viimeinen kappale auttaa parhaiten. Jos haluat ratkaista yleisemmin miten valita tuollaisia värejä, niin tekstistä välissä voi olla ehkä hyötyä. Ehkä.

Kaikkia 20 väriä ei tosin taida olla mahdollista saada kovin erilaisiksi keskenään. Ohessa 20 likimain yhtä kaukana toisistaan olevaa väriä, keskiharmaan kirkkaudella. Värit saisi hieman enemmän erilleen, jos olisi jaksanut koodata enemmän. Mutta, ei niistä saa täysin erilaisia keskenään.

color: #b44ecc;
color: #536f50;
color: #bcdcd7;
color: #44b3db;
color: #8e888f;
color: #7ead5b;
color: #b89f5b;
color: #823279;
color: #637f5a;
color: #363386;
color: #3a3c72;
color: #706879;
color: #667151;
color: #587259;
color: #b4a8ec;
color: #804854;
color: #802be8;
color: #24547d;
color: #a22a24;
color: #ce9ac6;

Ne siis on muodostettu ihan vaan jakamalla tuo mahdollisten värien joukko 20 klusteriin, kun sen sai aikaan suoraan Matlabin standardikirjaston avulla.

% Pisteiden määrä.
N = 401;

% Muodostetaan väriavaruus.
l = 50;
a = linspace(-100, 100, N);
b = linspace(-100, 100, N);
L = l * ones(N, N);
[A, B] = meshgrid(a, b); % Kaikki mahdolliset yhdistelmät a:ta ja b:tä.
LAB = cat(3, L, A, B);

% Muutetaan sRGB-väriavaruuteen, jotta voidaan poistaa sen ulkopuolelle jäävät värit.
sRGB = lab2rgb(LAB);
ind = (sRGB(:, :, :) < 0) | (sRGB(:, :, :) > 1);

% Tehdään kaikista esitettävissä olevista väreistä pisteitä.
aa = A(~any(ind, 3));
bb = B(~any(ind, 3));
p = [aa bb];

% Ja jaetaan pisteet 20 joukkioon.
[idx, c] = kmeans(p, 20, 'MaxIter', 1000);

% Joukkioiden keskipisteet ovat halutunkaltaisia värejä, tai no, likiarvo aiheesta.
data = round(255 * lab2rgb([50 * ones(20, 1) c]));
fprintf('color: #%x%x%x;\n', data);

--

Jos sopii, niin hämmennän hieman lisää tätä kirkkauslaskentaa: jos käytät suoraan noita heksakoodista saamiasi arvoja, niin tuo ensimmäinen kaava toimii todella huonosti.

Tässä kohtaa pitää tuoda mukaan käsite "väriavaruus", eli mitä nuo kolme lukua tarkoittavat.

Ensimmäinen kaava olettaa lineaarisen väriavaruuden, jossa punaisen lukuarvo vastaa suoraan punaisen kirkkautta. Tietokonekäytössä yleisin sRGB-väriavaruus, jonka lukuarvoja nuo ovat taas käyttää "monimutkaista" kaavaa kirkkaudelle. Tuon kaavan ideana on pakata kuvat pienempään tilaan, koska nyt kuvan kirkkaiden kohtien kirkkautta ei tarvitse tallentaa yhtä tarkasti, ja nuo 8 bittiä riittävät kullekin komponentille. (Jos haluat tietää lisää, niin wikipediassa on tuo kaava, https://en.wikipedia.org/wiki/SRGB .)

Jos haluaa mahdollisimman hyvin yhtä kirkkaita värejä, niin silloin kannattaa käyttää jotain tähän sopivaa väriavaruutta, jossa kirkkaus on yksi noista komponenteista (ja kaksi muuta kuvaa sävyä). Näitä on monta, osa on yksinkertaisia ja karkeampia arvioita ja osa monimutkaisempia, hieman riippuen siitä kuinka hyvän haluaa.

--

CIELAB on yksi parhaista väriavaruuksista tähän käyttöön, siinä on, kaiken muun lisäksi, siten että yhtä kaukana toisistaan olevat komponenttien lukuarvot vastaavat likimain yhtä kaukaisia värejä.

Pari valmista vakiokirkkauden värikarttaa löytyy Wikipediasta, sieltä voi pipetillä poimia sävyjä: https://en.wikipedia.org/wiki/Lab_color_space ).