Self-Wiki: Farbe

[Matthias Scharwies]

Servus!

Matthias schrub:

@Rolf B hatte eine zündende Idee,hsl() interaktiv zu visualisieren, das kommt demnächst!

Hier mal der Arbeitsstand zum Anschauen:

https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Farben-HSL-Visualize.html

Da sind jetzt mehr Dinge drin als am Ende bleiben sollen.

• Der Blickwinkel soll am Ende einen fixen Wert haben und der Slider entfallen. Er ist zum Ausprobieren und für die 3D Fehlersuche drin.

Evtl. sogar nur 20° Blickwinkel, damit man mehr von der Säule sieht?

• Die Radiobuttons für den Anzeigemodus sind als Checkbox-Hack implementiert und sollen später auch wieder raus. Ich wollte nur schnell mal beide Modi zum Ausprobieren drin haben.

Ein großer Teil der Anzeigesteuerung inclusive der 3D-Modellierung erfolgt im CSS. Eigentlich sollte der Lightness-Balken bloß ein Div mit Farbverlauf werden, aber das sah beim Erstellen der Schrägansicht einfach nicht mehr gut aus. Ein echter Balken aus 7 Rechtecken und einem Kreis als Deckel ist einfach schicker 😉.

Erst überlegt, was du meinst, dann im Inspektor untersucht! Wahnsinn - so sieht es realistisch aus!

Einziges Problem: Firefox

Der untere Rand der Säule ist im FF 121 nicht gerundet

Die Farben sind im Firefox nicht gut - wsl. hast du die neue Hue interpolation method in <system> [ <richtung> hue ](caniuse) verwendet, habe noch nicht ins JS geschaut.

Evtl. reicht beim hsl()-Visualizer ein „normaler“ conic-gradient.

.conic-gradient1 {
	background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);
}

Im Farbwähler finde ich die label der Schieberegler für hsl() sehr schick. Für rgb() gefällt mir das dunkle nicht, deshalb habe ich da mit accent-color gearbeitet.

Sollte/Könnte man den Schiebereglern den aktuellen Helligkeitswert, bzw. die Sättigung als Wert für accent-color geben? Dann könnte man dort auf den visuell „breiten“ Streifen verzichten.

Wie willst du den Keil für die Farbsättigung anlegen? Evtl. nur eine Lupe/Kreis, die sich von der Säule nach außen bewegt?

Das ganze Ding ist in seinen Abmessungen jedenfalls hoch parametrisiert. Der Ausgangswert ist die Breite der Viewerbox, der Rest wird davon abgeleitet. Ich überlege auch noch, eine echte Maussteuerung zu integrieren, aber das wird dann eigentlich zu viel Arbeit.

Hatte zwar grad versucht mit + den Blickwinkel zu verstellen, ist aber imho nicht nötig!

Vielen Dank!

Herzliche Grüße

Matthias Scharwies