Dark Orchid — escala de cor em 11 passos

Dark Orchid (#9932cc) fica no 500, intocada. Cada outro passo é Dark Orchid 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 Dark Orchid 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.#9932cc

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 Dark Orchid

Success, warning, error e as demais são derivadas da própria Dark Orchid 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 #9932cc

Sugerida	Protanopia	Deuteranopia	Tritanopia
success#00863f	54.1	46.5	44.5
warning#d2000c	55.2	57.2	30.7
error#c8006e	14.9	31.4	22.1
discovery#3b5df3	8.4	5.4	44.9
info#0079a3	11.9	7.0	44.9
neutral#84738c	18.1	18.7	16.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 discovery começa colidindo com Dark Orchid sob Deuteranopia — ΔE₀₀ 5.4, abaixo do limiar de 11 — então o motor desloca a matiz dentro da família discovery até o par se separar de novo.

Exportar Dark Orchid

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: #f7effb;
  --color-color-100: #e7cef3;
  --color-color-200: #d6adeb;
  --color-color-300: #c68ce2;
  --color-color-400: #ad5bd6;
  --color-color-500: #9932cc;
  --color-color-600: #7a28a3;
  --color-color-700: #561c72;
  --color-color-800: #3d1452;
  --color-color-900: #250c31;
  --color-color-950: #0c0410;
}

SCSS

$color-color-50: #f7effb;
$color-color-100: #e7cef3;
$color-color-200: #d6adeb;
$color-color-300: #c68ce2;
$color-color-400: #ad5bd6;
$color-color-500: #9932cc;
$color-color-600: #7a28a3;
$color-color-700: #561c72;
$color-color-800: #3d1452;
$color-color-900: #250c31;
$color-color-950: #0c0410;

JavaScript

export const color = {
  50: '#f7effb',
  100: '#e7cef3',
  200: '#d6adeb',
  300: '#c68ce2',
  400: '#ad5bd6',
  500: '#9932cc',
  600: '#7a28a3',
  700: '#561c72',
  800: '#3d1452',
  900: '#250c31',
  950: '#0c0410',
};

JSON

{
  "color": {
    "50": "#f7effb",
    "100": "#e7cef3",
    "200": "#d6adeb",
    "300": "#c68ce2",
    "400": "#ad5bd6",
    "500": "#9932cc",
    "600": "#7a28a3",
    "700": "#561c72",
    "800": "#3d1452",
    "900": "#250c31",
    "950": "#0c0410"
  }
}

Figma Variables

{
  "color": {
    "50": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9686274509803922,
          0.9372549019607843,
          0.984313725490196
        ],
        "alpha": 1,
        "hex": "#F7EFFB"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:1",
        "com.figma.isOverride": true
      }
    },
    "100": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9058823529411765,
          0.807843137254902,
          0.9529411764705882
        ],
        "alpha": 1,
        "hex": "#E7CEF3"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:2",
        "com.figma.isOverride": true
      }
    },
    "200": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8392156862745098,
          0.6784313725490196,
          0.9215686274509803
        ],
        "alpha": 1,
        "hex": "#D6ADEB"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:3",
        "com.figma.isOverride": true
      }
    },
    "300": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7764705882352941,
          0.5490196078431373,
          0.8862745098039215
        ],
        "alpha": 1,
        "hex": "#C68CE2"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:4",
        "com.figma.isOverride": true
      }
    },
    "400": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.6784313725490196,
          0.3568627450980392,
          0.8392156862745098
        ],
        "alpha": 1,
        "hex": "#AD5BD6"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:5",
        "com.figma.isOverride": true
      }
    },
    "500": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.6,
          0.19607843137254902,
          0.8
        ],
        "alpha": 1,
        "hex": "#9932CC"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:6",
        "com.figma.isOverride": true
      }
    },
    "600": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.47843137254901963,
          0.1568627450980392,
          0.6392156862745098
        ],
        "alpha": 1,
        "hex": "#7A28A3"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:7",
        "com.figma.isOverride": true
      }
    },
    "700": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.33725490196078434,
          0.10980392156862745,
          0.4470588235294118
        ],
        "alpha": 1,
        "hex": "#561C72"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:8",
        "com.figma.isOverride": true
      }
    },
    "800": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.23921568627450981,
          0.0784313725490196,
          0.3215686274509804
        ],
        "alpha": 1,
        "hex": "#3D1452"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:9",
        "com.figma.isOverride": true
      }
    },
    "900": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.1450980392156863,
          0.047058823529411764,
          0.19215686274509805
        ],
        "alpha": 1,
        "hex": "#250C31"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:10",
        "com.figma.isOverride": true
      }
    },
    "950": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.047058823529411764,
          0.01568627450980392,
          0.06274509803921569
        ],
        "alpha": 1,
        "hex": "#0C0410"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:11",
        "com.figma.isOverride": true
      }
    }
  },
  "$extensions": {
    "com.figma.modeName": "Value"
  }
}

Abrir Dark Orchid no gerador Como a escala é montada