Working With Colors Guide

Es gibt viele Möglichkeiten, mit Farben im Web zu arbeiten. Ich denke, es ist hilfreich, die Mechanik hinter dem, was man verwendet, zu verstehen, und Farbe ist da keine Ausnahme. Tauchen wir tief in einige der technischen Details von Farbe im Web ein.

Farbmischung

Ein großer Teil der Arbeit mit Farben besteht darin, zu verstehen, dass die Art und Weise, wie man als Kind mit Farben umgegangen ist, nicht dieselbe ist wie die, wie man Farben auf einem Computer verwendet, aufgrund der Farbmischung. Als Kind arbeitet man mit Farbe. Farbe und Tinten aus einem Drucker haben winzige Partikel namens Pigmente, die sich vermischen und reflektieren, um Farbe für Ihr Auge darzustellen. Dies ist subtraktive Farbmischung. Je mehr Farben man hinzufügt, desto dunkler wird es, bis man braun erhält. Primärfarben sind dem, was man gewohnt ist, sehr ähnlich: Rot, Gelb, Blau. Aber wenn man diese Farben mit subtraktiver Farbmischung mischt, erhält man Braun.

Auf einem Computer (oder jedem Monitor) arbeiten wir mit Licht. Das bedeutet, dass alle Farben zusammen gemischt weiß ergeben. Vor Isaac Newtons berühmtem Prismen-Farbexperiment glaubte man, dass Farbe in Objekten enthalten sei, anstatt vom Objekt reflektiert und absorbiert zu werden. Isaac Newton nutzte ein Prisma, um seine Theorie zu beweisen, dass Sonnenlicht oder helles weißes Licht tatsächlich aus mehreren Farben besteht, indem er das Prisma nutzte, um die Farben zu trennen und einen Regenbogen zu erzeugen, und dann anschließend ein Prisma benutzte, um zu versuchen, das Blau weiter zu trennen. Das Blau spaltete sich nicht, was zeigte, dass die Farbe nicht im Prisma enthalten war, sondern dass das Prisma das Licht spaltete. Das bedeutet, dass bei der additiven Farbmischung, der Art der Farbmischung, die man bei einem Monitor erhält, Rot, Grün und Blau verwendet werden können, um alle Farben zu erzeugen, oder RGB. Bei dieser Art der Mischung ergeben Rot und Grün Gelb.

Monitore bestehen aus vielen Kombinationen kleiner Lichtpunkte, die sich zu einer Vielzahl von Farben kombinieren. Auflösung bezieht sich auf die Anzahl der einzelnen Farbpunkte, bekannt als Pixel, die auf einem Display enthalten sind. Bevor wir Monitore hatten, nutzten Künstler diese Art der Lichtfrequenz. Seurat und die Pointillisten nutzten Rot und Grün, um Gelb in Gemälden wie „La Grande Jatte“ zu erzeugen (obwohl er den Begriff Chromoluminarismus bevorzugte. Andere nannten es Divisionismus). Diese Art der Malerei wurde unter dem Glauben geschaffen, dass die optische Mischung reinere Resonanz in Ihrem Auge erzeugte als die traditionelle subtraktive Pigmentfarbmischung.

Monitore werden in verschiedenen Anzeigemodi hergestellt, die die Art und Weise ändern, wie wir Farbe durch sie wahrnehmen. Wir drücken dies in dem Begriff „Farbtiefe“ aus. Die Anzahl der gleichzeitig darstellbaren Farben wird durch diese Farbtiefe bestimmt. Wenn wir eine Bittiefe von 1 haben, können wir zwei Farben erzeugen, also monochrom. Eine Bittiefe von zwei Ebenen erzeugt 4, und so weiter, bis wir eine Bittiefe von 32 erreichen, obwohl Monitore, die das Web projizieren, üblicherweise eine 24-Bit-Bittiefendichte und 16.777.216 Farben haben, was True Color und Alpha-Kanal ist.

Wir nennen dies True Color, da unsere menschlichen Augen 10.000.000 verschiedene Farben erkennen können, daher ist eine 24-Bit-Tiefe sicherlich ausreichend. Bei dieser 24-Bit-Tiefe sind 8 Bits für Rot, Grün und Blau reserviert. Der Rest wird für Transparenz oder Alpha-Kanäle verwendet.

Nutzen wir diese Informationen, um unsere verfügbaren Farbeigenschaften im Web zu entschlüsseln.

Farbwerte

RGB-Werte

Der letzte Abschnitt veranschaulicht, was rbga(x, x, x, y); bedeutet, aber lassen Sie uns das noch etwas genauer aufschlüsseln und einige andere Eigenschaften und ihre Verwendungen zeigen. Was die Farbwerte im Web auf einem RGB-Kanal betrifft, so geben wir Farben auf einer Skala von 0-255 an.

x is a number from 0-255
y is a number from 0.0 to 1.0
rgb(x, x, x); or rgba(x, x, x, y);

Example: rbga(150, 150, 150, 0.5);

Hex-Werte

Hex-Farben sind ein etwas anderes Format, um die Werte auf die gleiche Weise darzustellen. Hex-Werte sind wahrscheinlich die gebräuchlichste Art, wie Entwickler Farben im Web bezeichnen.

Wenn Sie sich erinnern, dass ein Byte 8 Bit ist, repräsentiert jede Hex-Farbe oder -Zahl ein Byte. Eine Farbe wird nach der Intensität ihrer Rot-, Grün- und Blaukomponenten spezifiziert, daher nennen wir sie ein Triplett, wobei jedes in zwei Stellen ausgedrückt wird. Ein Byte repräsentiert eine Zahl im Bereich von 00 bis FF (in hexadezimaler Notation) oder 0 bis 255 in dezimaler Notation. Byte 1 ist Rot, Byte 2 ist Grün und Byte 3 ist Blau. Hexadezimal heißt so, weil es ein Basis-16-System verwendet. Die Werte reichen von 0-9 und A-F, wobei 0 der niedrigste und F der höchste Wert ist, also #00000 für schwarz und #FFFFFF für weiß.

Bei Tripletts mit wiederholten Werten können Sie die Wiederholung eliminieren, indem Sie sie in Kurzform schreiben, z. B. wird #00FFFF zu #0FF. Dieses System ist für Computer leicht zu verstehen und kurz zu schreiben, was es für schnelles Kopieren und Einfügen sowie für die Angabe in der Programmierung nützlich macht. Wenn Sie jedoch auf eine ausgefeiltere Weise mit Farben arbeiten möchten, ist HSL etwas besser lesbar für Menschen.

HSL-Werte

HSL-Werte arbeiten mit ähnlichen Semantiken und Bereichen wie RGB, aber anstatt mit Werten zu arbeiten, wie der Monitor die Farben interpretiert, arbeiten HSL-Werte mit Farbton-, Sättigungs- und Helligkeitswerten. Dies sieht syntaktisch ähnlich aus wie RGB-Werte, aber die Bereiche sind anders. Dieses System basiert auf einem Munsell-Farbsystem (er war der erste, der Farbe in diese drei Kanäle trennte oder ein dreidimensionales System basierend auf mathematischen Prinzipien erstellte, die an die tatsächliche menschliche Sicht gebunden sind).

Der Farbton rotiert in 360 Grad, ein voller Kreis, während Sättigung und Helligkeit Prozentsätze von 0 bis 100 sind.

x is a number from 0 - 360
y is a percentage from 0% to 100%
z is a number from 0.0 to 1.0
hsl(x, y, y); or hsla(x, y, y, z);

Example: hsla(150, 50%, 50%, 0.5);

Es ist eine relativ einfache Umstellung (genau genommen etwa 11 Codezeilen) für die Browser, um zwischen RGB- und HSL-Werten zu wechseln, aber für uns Menschen kann die Verwendung von HSL viel einfacher zu interpretieren sein. Stellen Sie sich ein Rad vor, mit dichtem und gesättigtem Inhalt in der Mitte. Diese Demo macht eine ziemlich gute Arbeit, um zu zeigen, wie es ausgedrückt wird.

Wenn Sie sich beim Arbeiten mit Farben nicht besonders geschickt fühlen, bietet hsla() einige ziemlich einfache Regeln, um schöne Effekte für Entwickler zu erzielen. Wir behandeln dies im Abschnitt Generative Farbe weiter unten.

Benannte Farben

Benannte Farben stehen uns auch als Entwickler zur Verfügung. Benannte Farben haben jedoch den Ruf, schwierig zu handhaben zu sein, da sie unpräzise sind. Die bemerkenswertesten und „berühmtesten“ Beispiele sind, dass Dunkelgrau tatsächlich heller ist als Grau und Limette und Limettengrün völlig unterschiedliche Farben sind. Es gibt sogar ein Spiel, bei dem Sie versuchen können, benannte Farben im Web zu erraten, das von Chris Heilmann erstellt wurde. Früher war chucknorris eine blutrote Farbe (soweit ich weiß, wird sie jetzt nur noch in HTML unterstützt), aber das war mein Favorit. Benannte Farben können nützlich sein, um die Farbverwendung schnell zu demonstrieren, aber typischerweise verwenden Entwickler Sass oder andere Präprozessoren, um Farbwerte nach Hex, RGBA oder HSLA zu speichern und sie benannten Farben zuzuordnen, die innerhalb des Unternehmens verwendet werden.

Farbvariablen

Eine gute Praxis ist es, Farbvariablen zu speichern und niemals direkt zu verwenden, sondern sie stattdessen anderen Variablen mit semantischeren Benennungsschemata zuzuordnen. CSS hat native Variablen, wie

:root {
  --brandColor: red;
}

body {
  background: var(--brandColor);
}

Aber sie sind ziemlich neu und haben sich zum Zeitpunkt des Schreibens noch nicht in Microsoft-Browsern durchgesetzt.

CSS-Präprozessoren unterstützen ebenfalls Variablen, so dass Sie Variablen wie $brandPrimary einrichten können, um sie in Ihrer gesamten Codebasis zu verwenden. Oder eine Map

$colors: (
  mainBrand: #FA6ACC,
  secondaryBrand: #F02A52,
  highlight: #09A6E4
);

@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown `#{$key}` in $colors.";
  @return null;
}

// _component.scss
.element {
  background-color: color(highlight); // #09A6E4
}

Denken Sie daran, dass die Benennung hier wichtig ist. Abstrakte Benennungen sind manchmal nützlich, so dass, wenn Sie eine Variable, die eine blaue Farbe repräsentierte, in eine orange Farbe ändern, Sie nicht alle Ihre Farbwerte durchgehen und umbenennen müssen. Oder schlimmer noch, ein Schild aufstellen, auf dem steht: „$blue ist jetzt orange.“ *trauriges Posaunengeräusch*

currentColor

currentColor ist ein unglaublich nützlicher Wert. Er respektiert die Kaskade und ist nützlich, um einen Farbwert auf Dinge wie Box-Schatten, Umrandungen, Ränder oder sogar Hintergründe zu erweitern.

Nehmen wir an, Sie haben ein Div erstellt und dann darin ein weiteres Div. Dies würde orangefarbene Ränder für das innere Div erzeugen

.div-external { color: orange; }
.div-internal { border: 1px solid currentColor; }

Das ist unglaublich nützlich für Icon-Systeme, egal ob SVG-Icons oder Icon-Fonts. Sie können currentColor als Standard für Füllung, Kontur oder Farbe festlegen und dann semantisch geeignete CSS-Klassen verwenden, um das Ding zu stylen.

Präprozessoren

CSS-Präprozessoren sind großartig für die Anpassung von Farben. Hier sind einige Links zu den Dokumentationen verschiedener Präprozessoren für Farbfunktionen

• Sass-Funktionen
• Less-Funktionen
• Stylus-Funktionen
• Beispiel für ein PostCSS-Plugin für Farbfunktionen

Hier sind einige der coolen Dinge, die wir speziell mit Sass machen können

mix($color1, $color2, [$weight])
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)

Es gibt wirklich Dutzende von Möglichkeiten, Farben programmatisch mit Präprozessoren zu mischen und zu verändern, und wir werden nicht auf alle im Detail eingehen, aber hier ist eine großartige interaktive Ressource für detailliertere Informationen.

Farbeigenschaften

Farbe, als CSS-Eigenschaft, bezieht sich auf die Schriftfarbe. Wenn Sie einer großen Fläche eine Farbe zuweisen, würden Sie background-color verwenden, es sei denn, es handelt sich um ein SVG-Element, in diesem Fall würden Sie fill verwenden. Border ist der Rahmen um ein HTML-Element, während stroke das entsprechende SVG-Gegenstück ist.

Box- und Textschatten

Die Eigenschaften box-shadow und text-shadow akzeptieren einen Farbwert. Textschatten akzeptieren 2-3 Werte: h-shadow (horizontaler Schatten), v-shadow (vertikaler Schatten) und einen optionalen Weichzeichner-Radius. Box-Schatten nehmen 2-4 Werte: h-shadow, v-shadow, optionalen Weichzeichner-Abstand und optionalen Streck-Abstand. Sie können auch `inset` am Anfang angeben, um einen invertierten Schatten zu erzeugen. Diese Seite hat eine großartige Demo mit einfachem, kopierbarem Code.

Verläufe

Lineare Verläufe funktionieren, indem eine Richtung angegeben wird. Von/nach (abhängig vom Browser-Präfix) oben, unten, links, rechts, Grad oder radiale Verläufe. Dann geben wir Farbpositionen und die gewünschte Farbe an jeder Position an. Diese können auch Transparenz akzeptieren.

Hier ist ein Beispiel:

Die meiste Syntax von Verläufen ist nicht allzu schwierig zu schreiben, aber ich genieße die Arbeit mit diesem Online-Verlauf-Editor, weil er auch die komplizierte Filter-Eigenschaft für die IE6-9-Unterstützung erstellt. Hier ist auch ein wirklich schöner UI-Verlauf-Ersteller. Dieser hier ist ziemlich cool, Open Source und man kann dazu beitragen.

Verläufe sind in SVG ähnlich einfach zu erstellen. Wir definieren einen -Block, auf den wir mit einer ID verweisen. Wir können optional auch eine Oberfläche für den Verlauf definieren.

<linearGradient id="Gradient">
  <stop id="stop1" offset="0" stop-color="white" stop-opacity="0" />
  <stop id="stop2" offset="0.3" stop-color="black" stop-opacity="1" />
</linearGradient>

Diese Verläufe unterstützen auch Opazität, so dass wir schöne Effekte erzielen und Effekte wie Animationen als Maske einsetzen können.

Verlaufstext ist auch in Webkit möglich. Wir haben hier auf CSS-Tricks einen wirklich schönen Code-Schnipsel dafür: hier auf CSS-Tricks.

Generative Farbe

Es gibt ein paar coole Möglichkeiten, auf einmal viele atemberaubende Farben zu erzeugen. Ich finde es sehr lustig, damit zu spielen, wenn ich generative Kunst oder UI-Elemente mit Code erstelle.

Solange Sie innerhalb der in den letzten Abschnitten festgelegten Bereiche bleiben, können Sie `for`-Schleifen entweder in Sass (oder jedem CSS-Präprozessor) oder JavaScript oder `Math.Random()` mit `Math.floor()` verwenden, um Farbwerte abzurufen. Wir benötigen `Math.floor()` oder `Math.ceil()`, denn wenn wir keine ganzen Zahlen zurückgeben, erhalten wir einen Fehler und keine Farbwerte.

Eine gute Faustregel ist, dass Sie nicht alle drei Werte aktualisieren sollten. Ich hatte gutes Glück mit viel Abweichung in einem Wertebereich, einer kleineren Abweichung im zweiten Wertesatz und keiner Abweichung für den dritten, nicht unbedingt in dieser Reihenfolge. Zum Beispiel ist HSL sehr einfach zu handhaben, um durch Farben zu gehen, denn wenn Sie durch den Farbton von 0 bis 360 iterieren, erhalten Sie einen vollen Bereich. Ein weiterer schöner Vorteil von Hue-Rotate in Grad ist, dass Sie sich nicht an Bereiche von 0-360 halten müssen, da es sich um einen vollen Kreis handelt, sogar -480 oder 600 sind immer noch Werte, die ein Browser interpretieren kann.

Sass

@mixin colors($max, $color-frequency) {
  $color: 300/$max;
  
  @for $i from 1 through $max {
    .s#{$i} {
      border: 1px solid hsl(($i - 10)*($color*1.25), ($i - 1)*($color / $color-frequency), 40%);
     }
  }
} 
.demo {
  @include colors(20,2);
}

Ich benutze das, um Fruit Loop-Farben in dieser Demo zu erstellen

Ebenso wie in dieser, mit einem anderen Bereich (schnell durch die Liste scrollen)

Im unten stehenden Code verwende ich `Math.random()` innerhalb von RGB-Werten, um viele Farben im gleichen Bereich zu erzeugen. Diese Demo erstellt eine dreidimensionale VR-Erfahrung mit React. Ich hätte auch mit einer For-Schleife iterieren können, aber ich wollte, dass die Farbe zufällig ist, um die Bewegung widerzuspiegeln. Der Himmel ist hier die Grenze.

JavaScript

class App extends React.Component {
  render () {
    const items = [],
          amt1 = 5,
          amt2 = 7;
    for (let i = 0; i < 30; i++) {
     let rando = Math.floor(Math.random() * (amt2 - 0 + 1)) + 0,
          addColor1 = parseInt(rando * i),
          addColor2 = 255 - parseInt(7 * i),
          updateColor = `rgb(200, ${addColor1}, ${addColor2})`;
      items.push(
	    // ...
        );
    }
    return (
      
       // ...
       {items}
      
    );
  }
}

GreenSock hat ein Werkzeug entwickelt, mit dem Sie relative Farbwerte animieren können, was nützlich ist, da Sie so viele Elemente gleichzeitig auswählen und sie relativ zu ihren aktuellen Farbkoordinaten animieren können. Hier sind einige Schildkröten, die die Idee demonstrieren

TweenMax.to(".turtle2 path, .turtle2 circle, .turtle2 ellipse", 1.5, {fill:"hsl(+=0, +=50%, +=0%)"});

Andere schöne Farbeffekte

Mix Blend Modes und Background Blend Modes

Wenn Sie Ebeneneffekte in Photoshop verwendet haben, sind Sie wahrscheinlich mit Mix-Blend-Modi vertraut. Fast jede Website in den 90ern hat sie verwendet (meine auch. *erröt*). Mix- und Background-Blend-Modi kombinieren zwei verschiedene überlagerte Bilder, und es stehen 16 Modi zur Verfügung. Die Einzelheiten jedes Modus zu behandeln, sprengt den Rahmen dieses Artikels, aber hier sind einige Schlüsselbeispiele.

Das obere Bild oder die obere Farbe wird als source bezeichnet, und die untere Ebene als destination. Der Bereich dazwischen ist, wo die Magie des Mischens geschieht und wird als backdrop bezeichnet. Wir mischen beide nach ziemlich einfachen mathematischen Formeln.

Wenn Sie es mit mir wirklich nerdy mögen, hängen die Farbbeziehungen für die Blend-Modi vom verwendeten Effekt ab. Zum Beispiel ist `multiply` destination × source = backdrop. Andere Effekte sind Variationen einfacher Mathematik mit Subtraktion, Multiplikation, Addition und Division. Linear ist A+B−1, während Color Burn 1−(1−B)÷A ist. Sie müssen jedoch keine dieser Formeln kennen, um sie zu verwenden.

Hier finden Sie umfangreichere Dokumentation und hier eine sehr einfache Demo, die die Arbeit von Farben mit einigen dieser Effekte veranschaulicht

Dieser großartige Artikel von Robin zeigt einige wirklich komplexe und beeindruckende Effekte, die Sie durch Schichten mehrerer Blend-Modi erzielen können. Unten behandeln wir das Mischen mit Filtern. Heutzutage kann man im Browser wirklich viel machen.

Filter

CSS-Filter bieten viele coole Farbeffekte sowie die Möglichkeit, ein farbiges Bild zu nehmen und es in Graustufen umzuwandeln. Wir haben hier auf CSS-Tricks eine großartige Ressource, die zeigt, wie diese funktionieren, und die Browserunterstützung ist inzwischen ziemlich gut. Bennett Feely hat auch diese nette Filtergalerie, wenn Sie explorativ veranlagt sind.

Filter und Blend-Modi können zusammenarbeiten! Una Kravets hat dieses coole Werkzeug namens CSSgram entwickelt, das einige Effekte kombiniert, um typische Instagram-Filter zu erstellen. Sie hat unten eine gute Dokumentation.

feColorMatrix

Una hat einen weiteren Artikel, der die Erstellung dieser Bilder mit feColorMatrix erforscht, einem Filterprimitiv in SVG, das auch auf HTML-Elemente angewendet werden kann. Es ist sehr leistungsfähig und ermöglicht es Ihnen, Farben fein abzustimmen und zu verfeinern. Wie der Name schon sagt, basiert das Markup von feColorMatrix auf einer Matrix von Werten, und wir wenden es über seine relative ID an.

<filter id="imInTheMatrix">
    <feColorMatrix in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>

  <path filter="url(#imInTheMatrix)"  … />

Wir können diese Matrix auch erweitern und die Farbe, Sättigung usw. dieser Werte anpassen

<filter id="imInTheHueMatrix">
  <feColorMatrix in="SourceGraphic"
    type="hueRotate"
    values="150" />
</filter>

Unas Artikel geht detailliert auf alle Möglichkeiten ein, aber Sie finden noch mehr Informationen dazu und zu vielen anderen verrückten SVG-Farben- und Farbverlaufswerkzeugen in Amelia Belamy-Royds O'Reilly Buch, SVG Colors, Patterns & Gradients oder Mike Mullany's explorativer Demo.

Barrierefreiheit und andere Hinweise zu Farben

Eine Farbe ist nur in Bezug auf eine andere Farbe eine Farbe. Dies ist ein Teil dessen, was Farbe so schwierig macht. Sie sind damit wahrscheinlich vertraut, was die Barrierefreiheit betrifft. Ein helles Grün auf Schwarz kann zugänglich sein, aber wenn Sie es zu einem weißen Hintergrund ändern, ist es das nicht mehr.

Barrierefreiheit bei Farben kann mit einer Reihe von Werkzeugen gemessen werden. Hier sind einige meiner Favoriten

• Colorable
• Text auf Hintergrundbild a11y-Check
• Contrast-A
• Accessible Colors

Es ist auch sehr schön, Ihre Palette von Anfang an auf Barrierefreiheit einzustellen. Color Safe ist ein großartiges Werkzeug, das dabei hilft. Sobald Sie alles eingerichtet haben, hilft Ihnen WAVE (Web Accessibility Tool) bei der Bewertung Ihrer Webseite.

Farbe und Atmosphäre

Farbe wird von der Atmosphäre beeinflusst, was eine ziemlich wichtige Sache ist, wenn man eine Illusion von Tiefe erzeugen will. Dinge, die näher sind, haben eine höhere Sättigung und mehr Kontrast. Dinge, die weiter weg sind, erscheinen verschwommener.

Schatten

Schatten sind nicht grau, sie sind das Komplement der Farbe des Lichts. Wenn das Licht, das Sie auf Ihre Hand scheinen lassen, einen gelben Stich hat, erscheint der Schatten lila. Dieses Wissen ist nützlich, wenn Sie sehr angesagte lange Schatten erstellen.

Native Farbeingaben

Es gibt einen nativen Browser-Farbauswahldialog, den Sie verwenden können, um Ihren Benutzern zu helfen, Farben dynamisch auszuwählen. Sie können <input type="color"> oder <input type="color" value="#ff0000"> schreiben, wenn Sie eine Farbinformation wünschen. Es ist so einfach zu benutzen. Gut gemacht, Browser. Eine Sache, die man beachten sollte, ist, dass die Art und Weise, wie es aussieht, je nach Browser leicht variiert, genau wie bei jedem anderen nativen Steuerelement. Dieses Pen von Noah Blon zeigt, wie man das in Verbindung mit einem CSS-Farbfilter für den Farbton verwendet, um dynamisch Teile eines Bildes auszuwählen, um deren Farbe zu ändern. Der Rest des Bildes ist in Graustufen, also nicht betroffen. Ziemlich clever.

Spaß für Entwickler und andere Ressourcen

• Das Color Highlighter Plugin für Sublime Text ist das, was ich benutze, um leicht zu sehen, welche Farbe der Browser interpretieren wird. Ich benutze gerne {"ha_style": "outlined"}, aber ich weiß aus diesem Artikel, dass Wes Bos „filled“ bevorzugt.
• Es gibt verschiedene traditionelle Palettenkombinationen und Online-Webressourcen, die Ihnen dabei helfen können. Für die wissenschaftlicheren gibt es Paletton oder Adobe Color. Benjamin Knight hat Adobes Farbwerkzeug in d3 auf CodePen neu erstellt, was ziemlich genial ist und einen Blick wert ist. Wenn Sie möchten, dass das Web die Schwerstarbeit für Sie leistet (wer möchte das nicht?), ist Coolors so einfach wie möglich.
• Wenn Sie Hilfe bei der Interpretation von Farben benötigen und ein schnelles, einfaches Werkzeug wünschen, das die Arten von Farb-Eigenschaften für Sie austauscht, dann sind Sie bei Colorhexa für praktisch jeden denkbaren Farb-Austauschtyp bestens aufgehoben.
• Für die Nerds unter den Farb-Nerds können Sie sogar Ihre Konsolenausgabe in Farben erhalten. Hier ist ein toller Pen, der zeigt, wie das funktioniert.
• Super Color Palette ist ein kleines Spielzeug zum Erstellen von Farbkombinationen mit einer Vielzahl von Steuerelementen und der Möglichkeit, Farben in verschiedenen Bildformaten zu exportieren, einschließlich SVG, JPG und PNG. Es ist ein kostenloses Projekt mit einem Discord-Kanal, um Ihre Farbpaletten zu teilen und über Farben zu fachsimpeln.

Fazit

Der Umfang dieses Artikels ist ziemlich groß und das Web bietet viele Farben zum Erkunden, aber hoffentlich bietet dieser kurze Artikel Ihnen einen Ausgangspunkt für Experimente und Verständnis.