nicht angemeldet
Farbwähler
Matthias Scharwies
Farbwähler
Matthias Scharwies
Gunnar BittersmannServus!
Ich habe den Artikel color mal ein bisschen aufgeräumt.
Dabei habe ich auch den Link auf Helferlein: Farbwähler entfernt.
Dieses Beispiel mit Frames könnte man ja heute mit input type=color realisieren.
Braucht man das heute noch? Wenn ja, was sollte ein Farbwähler für euch beinhalten:
- Auswahl von Schrift- und Hintergrundfarbe
- Eine Anzeige mit Beispielbereich
- In FF und Chr sind HSL und RBG-Werte bereits im browsereigenen Farbwähler drin - Braucht man eine Anzeige der Hex-Werte, die ja als Wert/String übergeben werden?
- Kontrastchecker - Wie würde man so etwas programmieren?
Sollte der Farbwähler das erste, sehr einfache Beispiel ersetzen oder unten unter ==Anwendungsbeispiel == stehen?
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
Es gibt viel zu tun: ToDo-Liste
-
Servus!
- Kontrastchecker - Wie würde man so etwas programmieren?
Bei Stackoverflow gefunden. Man muss wohl die Leuchtdichte (luminance) in Graustufen umrechnen und dann vergleichen.
Für das gefundene Snippet müsste ich wohl die hex-Werte in Dezimal umwandeln.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
@@Matthias Scharwies
Ich habe den Artikel color mal ein bisschen aufgeräumt.
Na dann ist ja Platz für Neues:
#1481B8E5(mit Opazität achtstellig/viestellig)rgb(20 129 184)(ohne Kommas)rgb(20 129 184 / 0.9)(rgb()mit 4 Werten: mit Opazität;hsl()entsprechend)hsl(200deg 80% 40%)(Winkel mit Einheit)- HWB-Farbmodell
Das wäre auch eine gute Stelle, die Vorteile von HSL/HWB gegenüber RGB darzulegen.
- Kontrastchecker - Wie würde man so etwas programmieren?
Bspw. so:
<a href="https://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> (WebAIM)<a href="http://contrast-ratio.com/">contrast ratio</a> (Lea Verou)
Nur dass HTML nicht „programmiert“ wird.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Servus!
@@Matthias Scharwies
Ich habe den Artikel color mal ein bisschen aufgeräumt.
Na dann ist ja Platz für Neues:
#1481B8E5(mit Opazität achtstellig/viestellig)rgb(20 129 184)(ohne Kommas)rgb(20 129 184 / 0.9)(rgb()mit 4 Werten: mit Opazität;hsl()entsprechend)hsl(200deg 80% 40%)(Winkel mit Einheit)- HWB-Farbmodell
Da hab ich ein bisschen Bauschschmerzen mit. Ich habe den Artikel angefasst, weil ein neuer Benutzer ein background-color mit eingefügt hatte (und zwar nur im Code - logischerweise nicht im Live-Beispiel). Dabei habe ich einige CSS-Angaben rausgehauen.
Noch mehr verschiedene Farbangaben würden noch mehr Elemente und damit weniger Übersicht bedeuten.
Das wäre auch eine gute Stelle, die Vorteile von HSL/HWB gegenüber RGB darzulegen.
- Kontrastchecker - Wie würde man so etwas programmieren?
Bspw. so:
<a href="https://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> (WebAIM)<a href="http://contrast-ratio.com/">contrast ratio</a> (Lea Verou)
Nur dass HTML nicht „programmiert“ wird.
Ha, ha, ha - ich habe mal ein Grundmodell eines Farbwählers angelegt, damit die Seite zu input type="color" zeigt, wie die Eingabe mit JavaScript auch weiterverarbeitet werden kann.
Jetzt wär's natürlich einfach, deine URLs zu verlinken und nicht zu programmieren.
Schöner wär halt ein komfortablerer Farbwähler; der von Lea Verou sieht schon gut aus.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
-
hallo
Dieses Beispiel mit Frames könnte man ja heute mit input type=color realisieren.
Für [input type=color] bekommt das w3c und die whatwg meinen Steinzeit-Award.
input type=text bietet hier definiv uendlich viele Vorteile.
-
Servus!
hallo
Dieses Beispiel mit Frames könnte man ja heute mit input type=color realisieren.
Für [input type=color] bekommt das w3c und die whatwg meinen Steinzeit-Award.
Na ja, es sieht nicht wirklich gut aus. Habe es jetzt nur im FF, Chr und Opera (sieht ziemlich gleich bescheiden aus) und Android (noch schlimmer) getestet.
input type=text bietet hier definiv uendlich viele Vorteile.
Die ganze Rumtipperei, bzw. Copy & Paste ist aber auch mühselig. Langfristig möchte ich einen Canvas-Color Picker entwickeln, der eben nicht nur eine Farbe aussucht, sondern Textfarbe und Hintergrund anzeigt und dann noch den Kontrast berechnet.
Lea Verous Kontrast-Checker ist da schon gut, mir fehlt nur noch der bunte Farbverlauf zum Reinklicken.
Es ist die Frage, ob wir sowas anbieten sollen / können. Wenn, dann wäre es auf src.selfhtml.org gut aufgehoben - im Wiki sieht der Dez-Hex-Umrechner eher blöd aus.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
hallo
Die ganze Rumtipperei, bzw. Copy & Paste ist aber auch mühselig. Langfristig möchte ich einen Canvas-Color Picker entwickeln, der eben nicht nur eine Farbe aussucht, sondern Textfarbe und Hintergrund anzeigt und dann noch den Kontrast berechnet.
Ich will dich in keiner Weise davon abhalten, ganz im Gegenteil.
Aber Farbwahl ist so eine Sache. Nomalerweise machen Farbpipetten viel mehr Sinn. Und entsprechend möchte man dazu auch Farbschemen generieren.
Wenn schon sollte auch das kombiniert sein mit Gradient-Tools. (Es soll ja nützlich sein)
Lea Verous Kontrast-Checker ist da schon gut, mir fehlt nur noch der bunte Farbverlauf zum Reinklicken.
Nur der Mensch ist ein valider Kontrastchecker. Des einen Medizin ist des anderen Gift. Und ich kann nur sagen, Korrekturen gehören in die Browsereinstellungen, nicht in zig Milliarden CSS-Files.
Es ist die Frage, ob wir sowas anbieten sollen / können.
Nein! Aber ja doch! Mach's...
--
Sammelt Klopapier!!! In der Zeitungsbranche herrscht Papiermangel!!!-
Servus!
hallo
Die ganze Rumtipperei, bzw. Copy & Paste ist aber auch mühselig. Langfristig möchte ich einen Canvas-Color Picker entwickeln, der eben nicht nur eine Farbe aussucht, sondern Textfarbe und Hintergrund anzeigt und dann noch den Kontrast berechnet.
Ich will dich in keiner Weise davon abhalten, ganz im Gegenteil.
Aber Farbwahl ist so eine Sache. Nomalerweise machen Farbpipetten viel mehr Sinn.
So was meinte ich doch - einen bunten Verlauf und ein Klick hinein. Evtl mit zusätzlichen Eingabefeld für Text und Anzeigefeld des aktuellen Werts.
Und entsprechend möchte man dazu auch Farbschemen generieren.
Da wären wir dann bei Adobe.kuler und palett.on Das kann man glaub ich nicht selbst programmieren, sondern wirklich nur verlinken.
Wenn schon sollte auch das kombiniert sein mit Gradient-Tools. (Es soll ja nützlich sein)
Optimalerweise ja. Dann aber nicht für color, sondern für das zukünftige fill-color des W3C (https://www.w3.org/TR/fill-stroke-3/)
Es ist die Frage, ob wir sowas anbieten sollen / können.
Nein! Aber ja doch! Mach's...
Irgendwann mal - Das ToDo ist schon so lange drin - seufz.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
hallo
Nomalerweise machen Farbpipetten viel mehr Sinn.
So was meinte ich doch - einen bunten Verlauf und ein Klick hinein. Evtl mit zusätzlichen Eingabefeld für Text und Anzeigefeld des aktuellen Werts.
Mein Fehler ;(
Praktisch ist es für mich viel öfters sinnvoll, irgendwo mit einer Farbpipette in einem Bild eine Farbe aufzulesen. Isolierte Gradientfelder haben ja nichts zu tun mit dem Farbkontext, in welchem du Farben dann anwendest.
Also der Workflow ist:
- Lese eine Farbe in einem bestehenden Produkt auf.
- Korrigiere die Farbe danach mit einem Farbtool, und füge das Resultat einem Farbschema zu.
--
Sammelt Klopapier!!! In der Zeitungsbranche herrscht Papiermangel!!!
-
-
-
-
@@beatovich
Für [input type=color] bekommt das w3c und die whatwg meinen Steinzeit-Award.
Warum „Steinzeit“? Und warum Award?
input type=text bietet hier definiv uendlich viele Vorteile.
Die da wären?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
hallo
input type=text bietet hier definiv uendlich viele Vorteile.
Die da wären?
Farbdefinitionen, die type=color nicht leisten. Das hast du ja selber schon beschrieben.
--
Sammelt Klopapier!!! In der Zeitungsbranche herrscht Papiermangel!!!-
@@beatovich
input type=text bietet hier definiv uendlich viele Vorteile.
Die da wären?
Farbdefinitionen, die type=color nicht leisten. Das hast du ja selber schon beschrieben.
Für Menschen ist HSL/HWB intuitiver als RGB. Aber wenn die Farbe sowieso über einen Farbwähler bestimmt wird, der Nutzer also mit dem Farbcode gar nicht in Berührung kommt, dann kann es dem Nutzer doch egal sein, in welchem Farbmodell die Farbe systemintern repräsentiert wird.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
hallo
Für Menschen ist HSL/HWB intuitiver als RGB. Aber wenn die Farbe sowieso über einen Farbwähler bestimmt wird, der Nutzer also mit dem Farbcode gar nicht in Berührung kommt, dann kann es dem Nutzer doch egal sein, in welchem Farbmodell die Farbe systemintern repräsentiert wird.
Das ist so wahr wie es dem Maler egal ist, welche Chemikalien die Farbe definieren, solange er einen Pinsel und einen Kübel Farbe hat. Nur dass der Kübel hier nicht die Dicke des Farbauftrags bestimmt.
-
-
-
-