← Back to Learning
💻

CSS Color Keywords

Learn about predefined CSS color keywords

Introduction

CSS provides a set of predefined color keywords such as 'red', 'blue', 'green', and others.

Basic Colors

red
blue
green
yellow

Extended Colors

CSS also includes many extended colors such as coral, skyblue, tomato, teal, and many others.

coral
skyblue
tomato
teal

Usage

Color keywords are convenient for quick use but are limited in the number of available colors. For precise colors, it's better to use HEX or RGB.

CSS-Farb-Schlüsselwörter: Vollständiges Nachschlagewerk für Webentwickler

CSS bietet einen umfangreichen Satz vordefinierter Farb-Schlüsselwörter, von grundlegenden (red, blue, green) bis zu erweiterten (coral, skyblue, tomato, teal). Diese Schlüsselwörter vereinfachen die Arbeit mit Farben in CSS, haben aber Einschränkungen in Präzision und Anzahl verfügbarer Farbtöne.

In diesem detaillierten Leitfaden behandeln wir alle CSS-Farb-Schlüsselwörter, ihre Anwendung, Vorteile und Nachteile. Sie lernen, wie Sie поиск названия цвета verwenden, um Farbnamen zu finden, mit конвертер цветов arbeiten, um Schlüsselwörter in HEX/RGB zu konvertieren, und генератор UI токенов anwenden, um Design-Systeme basierend auf CSS-Farben zu erstellen.

Grundlegende und erweiterte CSS-Farb-Schlüsselwörter

Der CSS-Standard definiert 147 Farb-Schlüsselwörter, einschließlich grundlegender Farben (red, blue, green, yellow, black, white, gray) und einer erweiterten Palette (coral, skyblue, tomato, teal, lavender, salmon, turquoise und viele andere).

Jedes Schlüsselwort entspricht einem spezifischen HEX-Wert, zum Beispiel ist 'red' gleichwertig mit #FF0000, 'blue' ist #0000FF. Diese Schlüsselwörter sind praktisch für schnelles Prototyping und Lernen, aber in der Präzision begrenzt.

Für professionelle Projekte wird empfohlen, HEX-, RGB- oder HSL-Formate für präzise Farbkontrolle zu verwenden. Das Tool поиск названия цвета ermöglicht es, den Namen jeder Farbe zu finden, einschließlich CSS-Schlüsselwörter, und ihre genauen HEX/RGB-Werte zu erhalten.

Praktische Anwendung von CSS-Farb-Schlüsselwörtern

CSS-Farb-Schlüsselwörter werden in Eigenschaften wie color, background-color, border-color und anderen verwendet. Die Syntax ist einfach: color: red; background-color: blue;. Sie sind besonders nützlich für schnelles Prototyping, Lernen und die Erstellung einfacher Schnittstellen.

Für präzise Markenfarben, Gradienten und komplexe Design-Systeme ist es jedoch besser, HEX- oder RGB-Werte zu verwenden. Moderne Tools wie конвертер цветов ermöglichen die sofortige Konvertierung von CSS-Schlüsselwörtern in HEX-, RGB- und HSL-Formate, was bei der Arbeit mit Design-Mockups kritisch ist.

Bei der Erstellung von Design-Systemen verwendet генератор UI токенов präzise Farbwerte statt Schlüsselwörter, um Konsistenz und Kontrolle zu gewährleisten.

Einschränkungen und Best Practices

Die Hauptbeschränkung von CSS-Farb-Schlüsselwörtern ist ein fester Satz von 147 Farben, was für moderne Designprojekte unzureichend ist. Außerdem gibt es keine Kontrolle über Farbtöne, Sättigung und Helligkeit.

Für die Erstellung von Themes, Gradienten und barrierefreien Schnittstellen sind präzise Farbwerte erforderlich. Bei der Arbeit mit Branding ist es wichtig, präzise Markenfarben zu verwenden, nicht ungefähre Schlüsselwörter.

Für die Kontrastprüfung verwenden Sie проверка контраста, das mit präzisen Farbwerten arbeitet. Bei der Erstellung von Farbpaletten generiert генератор палитр harmonische Kombinationen basierend auf präzisen HEX/RGB-Werten, nicht Schlüsselwörtern.

Заключение

CSS-Farb-Schlüsselwörter sind ein praktisches Tool für schnelles Prototyping und Lernen, aber für professionelle Projekte wird empfohlen, präzise Farbformate (HEX, RGB, HSL) für vollständige Farbkontrolle und Design-Konsistenz zu verwenden.