Goldenrod — escala de cor em 11 passos

Goldenrod (#daa520) fica no 500, intocada. Cada outro passo é Goldenrod sobre branco ou preto, com opacidade decrescente — assim a escala inteira fica na mesma família de matiz, em vez de escorregar para outra cor nas pontas.

Abrir Goldenrod no gerador

8%50

24%100

40%200

56%300

80%400

100%500sua cor

80%600

56%700

40%800

24%900

8%950

Cada passo é a base sobre branco ou preto, na opacidade indicada.#daa520

Para texto que precisa passar AA no branco, 700, 800, 900, 950 cruzam a linha de 4,5:1. Sobre um fundo escuro, são 50, 100, 200, 300, 400, 500, 600.

Cores semânticas a partir de Goldenrod

Success, warning, error e as demais são derivadas da própria Goldenrod e depois checadas para continuarem distinguíveis da base — e entre si — sob os três tipos de daltonismo. A distância abaixo é o CIEDE2000 depois de cada simulação.

Derivadas de #daa520

Sugerida	Protanopia	Deuteranopia	Tritanopia
success#88c15b	6.6	7.4	42.6
warning#f98180	20.8	13.2	9.5
error#ea87cb	48.3	40.8	9.5
discovery#81adff	54.8	56.6	45.7
info#00c3db	43.9	48.5	51.7
neutral#898270	24.4	25.4	22.0

Distância CIEDE2000 até a base sob cada simulação. O menor dos três é o que decide, e um ponto marca os que ficam abaixo de 11.

A sugestão de success começa colidindo com Goldenrod sob Protanopia — ΔE₀₀ 6.6, abaixo do limiar de 11 — então o motor desloca a matiz dentro da família success até o par se separar de novo.

Exportar Goldenrod

Os mesmos cinco formatos que o gerador produz, para esta escala. Copie qualquer bloco, ou abra a ferramenta para ajustar a escala antes.

CSS

:root {
  --color-color-50: #fcf8ed;
  --color-color-100: #f6e9c9;
  --color-color-200: #f0dba6;
  --color-color-300: #eacd82;
  --color-color-400: #e1b74d;
  --color-color-500: #daa520;
  --color-color-600: #ae841a;
  --color-color-700: #7a5c12;
  --color-color-800: #57420d;
  --color-color-900: #342808;
  --color-color-950: #110d03;
}

SCSS

$color-color-50: #fcf8ed;
$color-color-100: #f6e9c9;
$color-color-200: #f0dba6;
$color-color-300: #eacd82;
$color-color-400: #e1b74d;
$color-color-500: #daa520;
$color-color-600: #ae841a;
$color-color-700: #7a5c12;
$color-color-800: #57420d;
$color-color-900: #342808;
$color-color-950: #110d03;

JavaScript

export const color = {
  50: '#fcf8ed',
  100: '#f6e9c9',
  200: '#f0dba6',
  300: '#eacd82',
  400: '#e1b74d',
  500: '#daa520',
  600: '#ae841a',
  700: '#7a5c12',
  800: '#57420d',
  900: '#342808',
  950: '#110d03',
};

JSON

{
  "color": {
    "50": "#fcf8ed",
    "100": "#f6e9c9",
    "200": "#f0dba6",
    "300": "#eacd82",
    "400": "#e1b74d",
    "500": "#daa520",
    "600": "#ae841a",
    "700": "#7a5c12",
    "800": "#57420d",
    "900": "#342808",
    "950": "#110d03"
  }
}

Figma Variables

{
  "color": {
    "50": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9882352941176471,
          0.9725490196078431,
          0.9294117647058824
        ],
        "alpha": 1,
        "hex": "#FCF8ED"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:1",
        "com.figma.isOverride": true
      }
    },
    "100": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9647058823529412,
          0.9137254901960784,
          0.788235294117647
        ],
        "alpha": 1,
        "hex": "#F6E9C9"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:2",
        "com.figma.isOverride": true
      }
    },
    "200": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9411764705882353,
          0.8588235294117647,
          0.6509803921568628
        ],
        "alpha": 1,
        "hex": "#F0DBA6"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:3",
        "com.figma.isOverride": true
      }
    },
    "300": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9176470588235294,
          0.803921568627451,
          0.5098039215686274
        ],
        "alpha": 1,
        "hex": "#EACD82"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:4",
        "com.figma.isOverride": true
      }
    },
    "400": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8823529411764706,
          0.7176470588235294,
          0.30196078431372547
        ],
        "alpha": 1,
        "hex": "#E1B74D"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:5",
        "com.figma.isOverride": true
      }
    },
    "500": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8549019607843137,
          0.6470588235294118,
          0.12549019607843137
        ],
        "alpha": 1,
        "hex": "#DAA520"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:6",
        "com.figma.isOverride": true
      }
    },
    "600": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.6823529411764706,
          0.5176470588235295,
          0.10196078431372549
        ],
        "alpha": 1,
        "hex": "#AE841A"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:7",
        "com.figma.isOverride": true
      }
    },
    "700": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.47843137254901963,
          0.3607843137254902,
          0.07058823529411765
        ],
        "alpha": 1,
        "hex": "#7A5C12"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:8",
        "com.figma.isOverride": true
      }
    },
    "800": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.3411764705882353,
          0.25882352941176473,
          0.050980392156862744
        ],
        "alpha": 1,
        "hex": "#57420D"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:9",
        "com.figma.isOverride": true
      }
    },
    "900": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.20392156862745098,
          0.1568627450980392,
          0.03137254901960784
        ],
        "alpha": 1,
        "hex": "#342808"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:10",
        "com.figma.isOverride": true
      }
    },
    "950": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.06666666666666667,
          0.050980392156862744,
          0.011764705882352941
        ],
        "alpha": 1,
        "hex": "#110D03"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:11",
        "com.figma.isOverride": true
      }
    }
  },
  "$extensions": {
    "com.figma.modeName": "Value"
  }
}

Abrir Goldenrod no gerador Como a escala é montada