Toolo

Hex in RGB umwandeln

Fügen Sie einen Hex-Code ein und lesen Sie sofort die Rot-, Grün- und Blauwerte ab, bereit für CSS oder Ihr Designprogramm.

Ausgangsfarbe

Live-Vorschau
ApolloÜbersicht
Monatlicher Umsatz

$284.592

+12,4 %
Live
02 · Tokens

Produktionsreife Formate

Jedes Format, jedes Framework. Einen Klick in die Zwischenablage.

HEX
#2F56E0
RGB
rgb(47, 86, 224)
HSL
hsl(227, 74%, 53%)
OKLCHModern
oklch(51.6% 0.214 266.4)
CSS Variable
--color-apollo-dashboard:        #2F56E0;
--color-apollo-dashboard-hover:  #2142CB;
--color-apollo-dashboard-active: #152CB7;
--color-apollo-dashboard-focus:  rgba(47, 86, 224, 0.2);
--color-apollo-dashboard-rgb:    47 86 224;
--color-apollo-dashboard-oklch:  51.6% 0.214 266.4;
Tailwind config
// tailwind.config.ts
colors: {
  apollo-dashboard: {
    DEFAULT: "#2F56E0",
    hover:   "#2142CB",
    active:  "#152CB7",
    focus:   "rgb(47 86 224 / 0.2)",
    rgb:     "47 86 224",
  },
},
SwiftUI
extension Color {
  static let apolloDashboard = Color(
    .sRGB,
    red:   0.184,
    green: 0.337,
    blue:  0.878,
    opacity: 1
  )
}
W3C Design Tokens
{
  "apollo-dashboard": {
    "$type": "color",
    "$value": "#2F56E0",
    "$description": "Apollo Dashboard / brand"
  }
}
03 · Barrierefreiheit

Kontrast & Sicht prüfen

WCAG 2.1 und APCA, plus sofortige Farbenblind-Simulation in der Live-Vorschau.

Aa
Der schnelle braune Fuchs springt über den faulen Hund
auf Weiß
WCAG 2.15.95:1
AAAAAAA Large
APCA Lc+79.0
BodyFließtext ab 16 px
Aa
Der schnelle braune Fuchs springt über den faulen Hund
auf Schwarz (#101010)
WCAG 2.13.20:1
AAAAAAA Large
APCA Lc-22.3
Nicht bestandenKontrast unzureichend
Farbenblind-SimulationWirkt auf die Live-Vorschau oben
04 · System

Semantische Palette

Automatisch aus Ihrer Ausgangsfarbe abgeleitet – Chroma angepasst, Kontrast mathematisch geprüft.

PrimärMarke, CTAs, Fokusrahmen
#2F56E0oklch(51.6% 0.214 266.4)
5.89:1
AA
SekundärErgänzende Akzente
#6A510Boklch(45.0% 0.087 86.4)
7.44:1
AAA
ErfolgBestätigungen, positive Zustände
#298646oklch(55.0% 0.130 150.0)
4.53:1
AA
WarnungVorsicht, ausstehende Prüfung
#C4881Foklch(67.0% 0.132 75.0)
3.02:1
Unter AA
GefahrDestruktive Aktionen, Fehler
#C53637oklch(55.0% 0.180 25.0)
5.26:1
AA
Projekt
8 Farben
Marke#2F56E0Ausgangsfarbe
Akzent#6A510B
Erfolg#298646
Warnung#C4881F
Gefahr#C53637
Tinte#101010
Hintergrund#FEFEFC
Subtil#F6F6EF

Tipp: Importieren Sie die JSON-Datei in Figma über das Tokens Studio-Plugin, um Figma Variables zu nutzen.