The Frank Bay under the Guarding: UI Design: States, Components & Interaction
The Frank Bay under the Guarding — a 95%-saturated Yellow at 40% lightness (RGB (199-169-5)) — how this shade behaves across interactive states and UI components.
The Frank Bay under the Guarding
#C7A905 · RGB (199-169-5) · HSL(51°,95%,40%)
Accessibility: Best text on RGB (199-169-5) is black (ratio 9.11:1 — WCAG AAA ✅). Check your own contrast →
Color in UI State Systems
Every UI color must work across multiple states: default, hover, active, focused, disabled, error, success. Planning a systematic set of variations from the base color is essential. A primary action color needs at minimum: hover (+10% lightness), pressed (-10%), disabled (heavily desaturated and lightened), and a focus ring variant.
Applying The Frank Bay under the Guarding in Ui
Building a UI state system from RGB (199-169-5):
- Default: RGB (199-169-5) at full value
- Hover: lightness +8–12%
- Active/pressed: lightness -8–12%
- Disabled: saturation ~20%, lightness ~70%
- Focus ring: complementary hue at full saturation, minimum 3:1 contrast
Similar Colors
Design neighbors:
More Yellow:
Full Data for The Frank Bay under the Guarding
13 formats + harmonies: The Frank Bay under the Guarding →
The Frank Bay under the Guarding (RGB (199-169-5)): UI-Design: Zustände, Komponenten & Interaktion
The Frank Bay under the Guarding — ein 95%-gesättigter Yellow-Ton bei 40% Helligkeit (RGB (199-169-5)) — behandelt wie sich dieser Farbton über interaktive Zustände und UI-Komponenten verhält.
The Frank Bay under the Guarding
#C7A905 · RGB (199-169-5) · HSL(51°,95%,40%)
Barrierefreiheit: Bester Text auf RGB (199-169-5) ist Schwarz (ratio 9.11:1 — WCAG AAA ✅). Eigenen Kontrast prüfen →
Farbe in UI-Zustandssystemen
Jede UI-Farbe muss über mehrere Zustände funktionieren: Standard, Hover, Aktiv, Fokussiert, Deaktiviert, Fehler, Erfolg. Ein systematischer Satz von Variationen aus der Basisfarbe ist essenziell. Eine primäre Aktionsfarbe braucht mindestens: Hover (+10% Helligkeit), gedrückt (-10%), deaktiviert (stark entsättigt und aufgehellt) und eine Fokusring-Variante.
Praktische Anwendung
Ein UI-Zustandssystem aus RGB (199-169-5) aufbauen:
- Standard: RGB (199-169-5) bei vollem Wert
- Hover: Helligkeit +8–12%
- Aktiv/gedrückt: Helligkeit -8–12%
- Deaktiviert: Sättigung ~20%, Helligkeit ~70%
- Fokusring: Komplementärfarbton bei voller Sättigung, mindestens 3:1 Kontrast
Ähnliche Farben
The Frank Bay under the Guarding
Alle Formate + Harmonien: The Frank Bay under the Guarding →
The Frank Bay under the Guarding (RGB (199-169-5)) : Design UI : états, composants & interaction
The Frank Bay under the Guarding — un Yellow saturé à 95% et luminosité 40% (RGB (199-169-5)) — traite comment cette nuance se comporte à travers les états interactifs et les composants UI.
The Frank Bay under the Guarding
#C7A905 · RGB (199-169-5) · HSL(51°,95%,40%)
Accessibilité : Meilleur texte sur RGB (199-169-5) : Noir (ratio 9.11:1 — WCAG AAA ✅). Vérifier votre propre contraste →
La couleur dans les systèmes d'états UI
Chaque couleur UI doit fonctionner à travers plusieurs états : défaut, survol, actif, focus, désactivé, erreur, succès. Planifier un ensemble systématique de variations à partir de la couleur de base est essentiel. Une couleur d'action primaire nécessite au minimum : survol (+10% de luminosité), pressé (-10%), désactivé (fortement désaturé et éclairci) et une variante d'anneau de focus.
Application pratique
Construire un système d'états UI à partir de RGB (199-169-5) :
- Défaut : RGB (199-169-5) à pleine valeur
- Survol : luminosité +8–12%
- Actif/pressé : luminosité -8–12%
- Désactivé : saturation ~20%, luminosité ~70%
- Anneau de focus : teinte complémentaire à pleine saturation, contraste minimum 3:1
Couleurs similaires
The Frank Bay under the Guarding
Tous les formats + harmonies : The Frank Bay under the Guarding →
The Frank Bay under the Guarding (RGB (199-169-5)): Diseño de UI: estados, componentes & interacción
The Frank Bay under the Guarding — un Yellow saturado al 95% y luminosidad 40% (RGB (199-169-5)) — trata cómo se comporta este matiz a través de los estados interactivos y los componentes de UI.
The Frank Bay under the Guarding
#C7A905 · RGB (199-169-5) · HSL(51°,95%,40%)
Accesibilidad: Mejor texto sobre RGB (199-169-5): Negro (ratio 9.11:1 — WCAG AAA ✅). Comprobar tu propio contraste →
El color en los sistemas de estados de UI
Cada color de UI debe funcionar a través de múltiples estados: predeterminado, hover, activo, enfocado, deshabilitado, error, éxito. Planificar un conjunto sistemático de variaciones a partir del color base es esencial. Un color de acción primaria necesita como mínimo: hover (+10% de luminosidad), presionado (-10%), deshabilitado (muy desaturado y aclarado) y una variante de anillo de foco.
Aplicación práctica
Construir un sistema de estados de UI a partir de RGB (199-169-5):
- Predeterminado: RGB (199-169-5) a pleno valor
- Hover: luminosidad +8–12%
- Activo/presionado: luminosidad -8–12%
- Deshabilitado: saturación ~20%, luminosidad ~70%
- Anillo de foco: tono complementario a plena saturación, contraste mínimo 3:1
Colores similares
The Frank Bay under the Guarding
Todos los formatos + armonías: The Frank Bay under the Guarding →
The Frank Bay under the Guarding (RGB (199-169-5)): Design UI: stati, componenti & interazione
The Frank Bay under the Guarding — un Yellow saturo al 95% e luminosità 40% (RGB (199-169-5)) — tratta come questa sfumatura si comporta attraverso gli stati interattivi e i componenti UI.
The Frank Bay under the Guarding
#C7A905 · RGB (199-169-5) · HSL(51°,95%,40%)
Accessibilità: Miglior testo su RGB (199-169-5): Nero (ratio 9.11:1 — WCAG AAA ✅). Controlla il tuo contrasto →
Il colore nei sistemi di stato UI
Ogni colore UI deve funzionare attraverso più stati: predefinito, hover, attivo, focus, disabilitato, errore, successo. Pianificare un insieme sistematico di variazioni dal colore base è essenziale. Un colore di azione primaria richiede almeno: hover (+10% di luminosità), premuto (-10%), disabilitato (fortemente desaturato e schiarito) e una variante dell'anello di focus.
Applicazione pratica
Costruire un sistema di stati UI da RGB (199-169-5):
- Predefinito: RGB (199-169-5) a pieno valore
- Hover: luminosità +8–12%
- Attivo/premuto: luminosità -8–12%
- Disabilitato: saturazione ~20%, luminosità ~70%
- Anello di focus: tonalità complementare a piena saturazione, contrasto minimo 3:1
Colori simili
The Frank Bay under the Guarding
Tutti i formati + armonie: The Frank Bay under the Guarding →
The Frank Bay under the Guarding (RGB (199-169-5)): Design de UI: estados, componentes & interação
The Frank Bay under the Guarding — um Yellow com saturação 95% e luminosidade 40% (RGB (199-169-5)) — aborda como este tom se comporta através dos estados interativos e dos componentes de UI.
The Frank Bay under the Guarding
#C7A905 · RGB (199-169-5) · HSL(51°,95%,40%)
Acessibilidade: Melhor texto sobre RGB (199-169-5): Preto (ratio 9.11:1 — WCAG AAA ✅). Verificar o seu próprio contraste →
A cor nos sistemas de estado de UI
Cada cor de UI deve funcionar através de múltiplos estados: padrão, hover, ativo, focado, desativado, erro, sucesso. Planear um conjunto sistemático de variações a partir da cor base é essencial. Uma cor de ação primária precisa no mínimo: hover (+10% de luminosidade), pressionado (-10%), desativado (muito dessaturado e clareado) e uma variante de anel de foco.
Aplicação prática
Construir um sistema de estados de UI a partir de RGB (199-169-5):
- Padrão: RGB (199-169-5) em valor pleno
- Hover: luminosidade +8–12%
- Ativo/pressionado: luminosidade -8–12%
- Desativado: saturação ~20%, luminosidade ~70%
- Anel de foco: matiz complementar em saturação plena, contraste mínimo 3:1
Cores semelhantes
The Frank Bay under the Guarding
Todos os formatos + harmonias: The Frank Bay under the Guarding →