Butterscotch #FDB147
Butterscotch es un naranja claro y vívido, con código hex #FDB147 y RGB rgb(253, 177, 71).
Aa
El texto negro es el que mejor se lee sobre este color (11.55:1).
Sobre este color
#FDB147 es un naranja claro y vívido. En OKLCH, su luminosidad es 81%, su croma 0.147 y su matiz 72°. Su matiz está del lado cálido de la rueda cromática. Es el color con nombre Butterscotch. El texto negro es el que mejor se lee sobre este color, con 11.55:1.
| Familia de matiz | Naranjas |
| Luminosidad | claro (81%) |
| Croma | vívido (0.147) |
| Temperatura | cálido |
| Nombre más cercano | Butterscotch |
| Texto negro | 11.55:1 |
| Texto blanco | 1.81:1 |
Colores que combinan con Butterscotch
Combinaciones obtenidas al rotar Butterscotch por la rueda de matiz de OKLCH, cada una con el nombre más cercano de nuestra lista.
Análogo
Matices vecinos, 30° a cada lado.
Triádico
Tres matices separados por 120°.
Paletas de colores con Butterscotch
Paletas seleccionadas que contienen un color a menos de ΔE 0.06 (OKLab) de Butterscotch, de la más cercana a la más lejana.
Colores con nombre similares
Los ocho colores con nombre más cercanos a Butterscotch, con su distancia ΔE.
- Light Orange #FDAA48 ΔE 0.017
- Orange Yellow #FFAD01 ΔE 0.026
- Mango #FFA62B ΔE 0.026
- Yellow Orange #FCB001 ΔE 0.027
- Macaroni And Cheese #EFB435 ΔE 0.029
- Pale Orange #FFA756 ΔE 0.031
- Orange #FFA500 ΔE 0.033
- Maximum Yellow Red #FCBF49 ΔE 0.034
Más sobre Butterscotch
Cómo hacer Butterscotch
Una receta inicial con colores de pintura comunes, calculada con un modelo espectral de pintura (el modo pintura del mezclador). Los pigmentos reales varían: mezcla primero una pequeña prueba y ajusta.
- 1 parte de naranja
- 1 parte de blanco
Resultado de la receta: #FAB055, una diferencia de ΔE 0.012 respecto a Butterscotch. Es muy parecido: la mayoría de la gente no notará la diferencia.
¿Qué colores forman el naranja? | Tabla de mezcla de colores
Códigos de Butterscotch en todos los formatos
| HEX | #FDB147 |
| RGB | rgb(253, 177, 71) |
| HSL | hsl(35, 98%, 64%) |
| OKLCH | oklch(81.5% 0.147 71.6) |
Contraste
Las relaciones de contraste de WCAG 2 son el objetivo de conformidad: AA exige 4.5:1 para texto de cuerpo y 3:1 para texto grande; AAA exige 7:1. Los valores Lc de APCA son una guía complementaria de los borradores de WCAG 3.
| Combinación | WCAG 2 | Resultado | APCA | Guía APCA |
|---|---|---|---|---|
| Texto blanco sobre #FDB147 | 1.81:1 | No cumple | Lc -37.7 | Elementos que no son texto, texto de marcador de posición |
| Texto negro sobre #FDB147 | 11.55:1 | AAA | Lc 70.2 | Texto de contenido, no para lecturas largas |
| Texto #FDB147 sobre blanco | 1.81:1 | No cumple | Lc 33.7 | Elementos que no son texto, texto de marcador de posición |
| Texto #FDB147 sobre negro | 11.55:1 | AAA | Lc -69.0 | Texto de contenido, no para lecturas largas |
Tonos y tintes de Butterscotch
Una escala de 50 a 950 creada en OKLCH: el matiz se mantiene, la luminosidad sigue una curva parecida a la de Tailwind v4 y cada paso permanece dentro de la gama sRGB. Este color está en el paso 300.
-
Paso 50
50
#FEF4E8
oklch(97.2% 0.019 72.6)
-
Paso 100
100
#FCE6CC
oklch(93.6% 0.042 71.9)
-
Paso 200
200
#FCD19E
oklch(88.6% 0.082 71.2)
-
Paso 300
300 (este color)
#FDB147
oklch(81.5% 0.147 71.6)
-
Paso 400
400
#DA8E00
oklch(70.7% 0.152 71.6)
-
Paso 500
500
#BB7900
oklch(63% 0.135 71.5)
-
Paso 600
600
#9E6500
oklch(55.5% 0.12 71.1)
-
Paso 700
700
#855500
oklch(49.1% 0.105 71.8)
-
Paso 800
800
#6D4500
oklch(42.6% 0.091 72)
-
Paso 900
900
#5C3900
oklch(37.7% 0.081 71.3)
-
Paso 950
950
#382100
oklch(27.1% 0.058 71.5)
Exporta esta escala para Tailwind con la herramienta de colores de Tailwind
Butterscotch con daltonismo
Simulado con el modelo de Machado et al. (2009). ΔE es cuánto se desplaza el color: por debajo de 0.02 aproximadamente no notarías el cambio.
| Visión | Se ve como | Cambio (ΔE) |
|---|---|---|
| Protanopía (sin conos rojos) | #CBB539 | 0.081 |
| Deuteranopía (sin conos verdes) | #DDC74A | 0.070 |
| Tritanopía (sin conos azules) | #FF9E9B | 0.116 |
| Acromatopsia (sin color) | #C0C0C0 | 0.148 |
Usa Butterscotch en tu producto
Conviértelo en roles de interfaz claros y oscuros con el contraste verificado y expórtalos a Tailwind v4, shadcn/ui, CSS o design tokens.