Saltar al contenido

Herramientas

Generar escalas

Escribe un color y obtén su escala de once pasos y la de neutros con su tono, con el método del curso, el contraste de cada paso y el archivo para importarlas en Figma.

Última revisión:

Escribe tu color y obtén dos escalas de once pasos: la de tu color y la de neutros con su tono. Se calculan con el método de Escalas de color, en oklch y guardadas en sRGB, y puedes descargarlas para importarlas en Figma.

Entrada

En hex, RGB o HSL: #33CC99, rgb(51 204 153) o hsl(160 60% 50%).

Se usa el hex #33CC99

Te proponemos el nombre del tono más parecido a tu color; puedes cambiarlo. En minúsculas y con guiones, como emerald o brand-blue.

0 es gris puro; 1, el máximo de color que da el método. DesignToken101 usa 0,5.

0,5

La curva es la escala de Tailwind CSS que se toma como modelo: de ella salen la luminosidad y el croma de cada paso. Tu color ocupa el paso de luminosidad más parecida y conserva su tono; los demás pasos siguen la forma de la curva. No hace falta usar Tailwind: la curva solo aporta cifras, y el resultado son colores en hex que sirven en cualquier código.

Te proponemos la curva del tono más parecido a tu color, que suele recortar menos croma. Puedes elegir otra.

  1. 50, croma 0,021
  2. 100, croma 0,052
  3. 200, croma 0,093
  4. 300, croma 0,143
  5. 400, croma 0,177, Tu color
  6. 500, croma 0,170
  7. 600, croma 0,145
  8. 700, croma 0,118
  9. 800, croma 0,095
  10. 900, croma 0,077
  11. 950, croma 0,051
Croma por paso de la curva emerald

Resultado

Escalas de #33CC99 · tinte 0,5 · curva emerald

emerald

  1. 50, #EEFCF5
  2. 100, #D5F8E8
  3. 200, #B0F0D3
  4. 300, #7AE5BA
  5. 400, #33CC99, Tu color
  6. 500, #1FB888
  7. 600, #18956E
  8. 700, #1B7758
  9. 800, #1A5E46
  10. 900, #1A4C3A
  11. 950, #0D2B20
Escala emerald, del paso 50 al 950: tu color está en el 400.
Escala emerald
ExportarPasooklchHexContraste con blancoContraste con neutral/950Recorte
50oklch(0.979 0.017 165.4)#EEFCF51,0618,70
100oklch(0.95 0.043 165.4)#D5F8E81,1417,33
200oklch(0.905 0.076 165.4)#B0F0D31,2915,29
300oklch(0.845 0.117 165.4)#7AE5BA1,5312,93
400oklch(0.755 0.145 165.4)#33CC992,059,63
500oklch(0.696 0.139 165.4)#1FB8882,547,78
600oklch(0.596 0.119 165.4)#18956E3,775,23
700oklch(0.508 0.097 165.4)#1B77585,493,60
800oklch(0.432 0.078 165.4)#1A5E467,682,57
900oklch(0.378 0.063 165.4)#1A4C3A9,822,01
950oklch(0.262 0.042 165.4)#0D2B2015,181,30

neutral

  1. 50, #F9FAFA
  2. 100, #F4F5F5
  3. 200, #E3E6E5
  4. 300, #D1D5D3
  5. 400, #9BA39F
  6. 500, #6C7671
  7. 600, #4B5550
  8. 700, #38433E
  9. 800, #1F2924
  10. 900, #101A15
  11. 950, #050C09
Escala neutral, del paso 50 al 950: los grises de tu sistema.
Escala neutral
ExportarPasooklchHexContraste con blancoContraste con neutral/950Recorte
50oklch(0.985 0.001 165.4)#F9FAFA1,0518,89
100oklch(0.97 0.002 165.4)#F4F5F51,0918,09
200oklch(0.922 0.003 165.4)#E3E6E51,2615,73
300oklch(0.87 0.005 165.4)#D1D5D31,4813,33
400oklch(0.708 0.011 165.4)#9BA39F2,587,65
500oklch(0.556 0.014 165.4)#6C76714,704,20
600oklch(0.439 0.015 165.4)#4B55507,742,55
700oklch(0.371 0.017 165.4)#38433E10,291,92
800oklch(0.269 0.017 165.4)#1F292414,991,32
900oklch(0.205 0.017 165.4)#101A1517,791,11
950oklch(0.145 0.014 165.4)#050C0919,761,00

Sobre blanco

Sobre neutral 950

Las escalas sobre blanco y sobre el neutral/950 generado

Exportar

Importar en Figma

  1. Arrastra el archivo Value.tokens.json al panel de variables. Figma crea una colección nueva con una variable por paso y un modo con el nombre del archivo, Value.
  2. Si todavía no tienes colección de primitivos, renombra esta, por ejemplo Primitives. Si ya la tienes, pasa las variables a ella: selecciónalas, haz clic derecho y elige Copy; abre tu colección, haz clic en el panel y pulsa ⌘V (Ctrl+V en Windows). Llegan con el mismo nombre, también el del grupo. Después, borra la colección que creó la importación (Figma: Create and manage variables).
  3. En cada variable, quita todos los scopes y comprueba que Hide from publishing está marcado. La importación pone todos los scopes aunque el archivo no lleve ninguno.
  4. Añade a cada variable su code syntax Web, como en Escalas de color.

Lo comprobamos en Figma en octubre de 2026.

Aviso

Import mode no añade variables a una colección: solo actualiza las que ya tienen el mismo nombre y tipo, y avisa con un error por cada una que no encuentra. Sirve para actualizar una escala que ya tienes: haz clic derecho en el modo de la colección, elige Import mode y el archivo. Cambia los valores sin preguntar, así que tus tokens semánticos que apuntan a esa escala cambiarán con ella.