Saddle Brown — escala de cor em 11 passos

Saddle Brown (#8b4513) fica no 500, intocada. Cada outro passo é Saddle Brown 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 Saddle Brown 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.#8b4513

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

Cores semânticas a partir de Saddle Brown

Success, warning, error e as demais são derivadas da própria Saddle Brown 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 #8b4513

Sugerida	Protanopia	Deuteranopia	Tritanopia
success#2b6b30	7.2	7.3	48.8
warning#e98d8a	33.4	30.5	30.4
error#853e6b	36.4	30.8	7.4
discovery#44559a	46.3	48.5	50.3
info#006581	37.7	41.6	48.1
neutral#5a5049	16.8	17.8	18.8

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 Saddle Brown sob Protanopia — ΔE₀₀ 7.2, 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 Saddle Brown

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: #f6f0ec;
  --color-color-100: #e3d2c6;
  --color-color-200: #d1b5a1;
  --color-color-300: #be977b;
  --color-color-400: #a26a42;
  --color-color-500: #8b4513;
  --color-color-600: #6f370f;
  --color-color-700: #4e270b;
  --color-color-800: #381c08;
  --color-color-900: #211105;
  --color-color-950: #0b0602;
}

SCSS

$color-color-50: #f6f0ec;
$color-color-100: #e3d2c6;
$color-color-200: #d1b5a1;
$color-color-300: #be977b;
$color-color-400: #a26a42;
$color-color-500: #8b4513;
$color-color-600: #6f370f;
$color-color-700: #4e270b;
$color-color-800: #381c08;
$color-color-900: #211105;
$color-color-950: #0b0602;

JavaScript

export const color = {
  50: '#f6f0ec',
  100: '#e3d2c6',
  200: '#d1b5a1',
  300: '#be977b',
  400: '#a26a42',
  500: '#8b4513',
  600: '#6f370f',
  700: '#4e270b',
  800: '#381c08',
  900: '#211105',
  950: '#0b0602',
};

JSON

{
  "color": {
    "50": "#f6f0ec",
    "100": "#e3d2c6",
    "200": "#d1b5a1",
    "300": "#be977b",
    "400": "#a26a42",
    "500": "#8b4513",
    "600": "#6f370f",
    "700": "#4e270b",
    "800": "#381c08",
    "900": "#211105",
    "950": "#0b0602"
  }
}

Figma Variables

{
  "color": {
    "50": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9647058823529412,
          0.9411764705882353,
          0.9254901960784314
        ],
        "alpha": 1,
        "hex": "#F6F0EC"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:1",
        "com.figma.isOverride": true
      }
    },
    "100": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8901960784313725,
          0.8235294117647058,
          0.7764705882352941
        ],
        "alpha": 1,
        "hex": "#E3D2C6"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:2",
        "com.figma.isOverride": true
      }
    },
    "200": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8196078431372549,
          0.7098039215686275,
          0.6313725490196078
        ],
        "alpha": 1,
        "hex": "#D1B5A1"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:3",
        "com.figma.isOverride": true
      }
    },
    "300": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7450980392156863,
          0.592156862745098,
          0.4823529411764706
        ],
        "alpha": 1,
        "hex": "#BE977B"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:4",
        "com.figma.isOverride": true
      }
    },
    "400": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.6352941176470588,
          0.41568627450980394,
          0.25882352941176473
        ],
        "alpha": 1,
        "hex": "#A26A42"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:5",
        "com.figma.isOverride": true
      }
    },
    "500": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.5450980392156862,
          0.27058823529411763,
          0.07450980392156863
        ],
        "alpha": 1,
        "hex": "#8B4513"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:6",
        "com.figma.isOverride": true
      }
    },
    "600": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.43529411764705883,
          0.21568627450980393,
          0.058823529411764705
        ],
        "alpha": 1,
        "hex": "#6F370F"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:7",
        "com.figma.isOverride": true
      }
    },
    "700": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.3058823529411765,
          0.15294117647058825,
          0.043137254901960784
        ],
        "alpha": 1,
        "hex": "#4E270B"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:8",
        "com.figma.isOverride": true
      }
    },
    "800": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.2196078431372549,
          0.10980392156862745,
          0.03137254901960784
        ],
        "alpha": 1,
        "hex": "#381C08"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:9",
        "com.figma.isOverride": true
      }
    },
    "900": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.12941176470588237,
          0.06666666666666667,
          0.0196078431372549
        ],
        "alpha": 1,
        "hex": "#211105"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:10",
        "com.figma.isOverride": true
      }
    },
    "950": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.043137254901960784,
          0.023529411764705882,
          0.00784313725490196
        ],
        "alpha": 1,
        "hex": "#0B0602"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:11",
        "com.figma.isOverride": true
      }
    }
  },
  "$extensions": {
    "com.figma.modeName": "Value"
  }
}

Abrir Saddle Brown no gerador Como a escala é montada