Navajo White — escala de cor em 11 passos

Navajo White (#ffdead) fica no 500, intocada. Cada outro passo é Navajo White 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 Navajo White 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.#ffdead

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

Cores semânticas a partir de Navajo White

Success, warning, error e as demais são derivadas da própria Navajo White 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 #ffdead

Sugerida	Protanopia	Deuteranopia	Tritanopia
success#87bc9c	12.5	17.6	39.2
warning#d29c84	16.5	14.6	16.2
error#d19cb8	31.0	26.7	14.6
discovery#9aaddd	38.1	40.7	39.7
info#74bdbf	24.4	31.5	41.0
neutral#afa89d	18.3	19.5	16.5

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 é a mais no limite: passa do limiar sob Protanopia, mas chega só a ΔE₀₀ 12.5, ficando logo acima da linha de 11 em vez de bem à frente dela.

Exportar Navajo White

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: #fffcf8;
  --color-color-100: #fff7eb;
  --color-color-200: #fff2de;
  --color-color-300: #ffedd1;
  --color-color-400: #ffe5bd;
  --color-color-500: #ffdead;
  --color-color-600: #ccb28a;
  --color-color-700: #8f7c61;
  --color-color-800: #665945;
  --color-color-900: #3d352a;
  --color-color-950: #14120e;
}

SCSS

$color-color-50: #fffcf8;
$color-color-100: #fff7eb;
$color-color-200: #fff2de;
$color-color-300: #ffedd1;
$color-color-400: #ffe5bd;
$color-color-500: #ffdead;
$color-color-600: #ccb28a;
$color-color-700: #8f7c61;
$color-color-800: #665945;
$color-color-900: #3d352a;
$color-color-950: #14120e;

JavaScript

export const color = {
  50: '#fffcf8',
  100: '#fff7eb',
  200: '#fff2de',
  300: '#ffedd1',
  400: '#ffe5bd',
  500: '#ffdead',
  600: '#ccb28a',
  700: '#8f7c61',
  800: '#665945',
  900: '#3d352a',
  950: '#14120e',
};

JSON

{
  "color": {
    "50": "#fffcf8",
    "100": "#fff7eb",
    "200": "#fff2de",
    "300": "#ffedd1",
    "400": "#ffe5bd",
    "500": "#ffdead",
    "600": "#ccb28a",
    "700": "#8f7c61",
    "800": "#665945",
    "900": "#3d352a",
    "950": "#14120e"
  }
}

Figma Variables

{
  "color": {
    "50": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.9882352941176471,
          0.9725490196078431
        ],
        "alpha": 1,
        "hex": "#FFFCF8"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:1",
        "com.figma.isOverride": true
      }
    },
    "100": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.9686274509803922,
          0.9215686274509803
        ],
        "alpha": 1,
        "hex": "#FFF7EB"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:2",
        "com.figma.isOverride": true
      }
    },
    "200": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.9490196078431372,
          0.8705882352941177
        ],
        "alpha": 1,
        "hex": "#FFF2DE"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:3",
        "com.figma.isOverride": true
      }
    },
    "300": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.9294117647058824,
          0.8196078431372549
        ],
        "alpha": 1,
        "hex": "#FFEDD1"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:4",
        "com.figma.isOverride": true
      }
    },
    "400": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.8980392156862745,
          0.7411764705882353
        ],
        "alpha": 1,
        "hex": "#FFE5BD"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:5",
        "com.figma.isOverride": true
      }
    },
    "500": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.8705882352941177,
          0.6784313725490196
        ],
        "alpha": 1,
        "hex": "#FFDEAD"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:6",
        "com.figma.isOverride": true
      }
    },
    "600": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8,
          0.6980392156862745,
          0.5411764705882353
        ],
        "alpha": 1,
        "hex": "#CCB28A"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:7",
        "com.figma.isOverride": true
      }
    },
    "700": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.5607843137254902,
          0.48627450980392156,
          0.3803921568627451
        ],
        "alpha": 1,
        "hex": "#8F7C61"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:8",
        "com.figma.isOverride": true
      }
    },
    "800": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.4,
          0.34901960784313724,
          0.27058823529411763
        ],
        "alpha": 1,
        "hex": "#665945"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:9",
        "com.figma.isOverride": true
      }
    },
    "900": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.23921568627450981,
          0.20784313725490197,
          0.16470588235294117
        ],
        "alpha": 1,
        "hex": "#3D352A"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:10",
        "com.figma.isOverride": true
      }
    },
    "950": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0784313725490196,
          0.07058823529411765,
          0.054901960784313725
        ],
        "alpha": 1,
        "hex": "#14120E"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:11",
        "com.figma.isOverride": true
      }
    }
  },
  "$extensions": {
    "com.figma.modeName": "Value"
  }
}

Abrir Navajo White no gerador Como a escala é montada