#7D7D7D 鼠色

Q: Quelle couleur est #7D7D7D ?

鼠色 est #7D7D7D, soit #7D7D7D en majuscules. En RGB : rgb(125,125,125) ; en HSL, environ hsl(0 0% 49%) ; en OKLCH : oklch(0.590 0.000 89.9).

Q: Comment utiliser 鼠色 en design ?

Donnez-lui un seul point focal, gardez le texte courant en neutre et vérifiez le contraste à 4.12 sur blanc et 4.59 sur noir.

Q: 鼠色 est-il accessible ?

Le contraste est de 4.12 sur blanc (FAIL) et de 4.59 sur noir (AA). Pour le grand texte, attendez le niveau AA.

Conversion de couleur

CMYK profile: Coated FOGRA39 · La notation suit CSS Color 4 et les règles de contraste WCAG 2.2.

En bref

Nom	鼠色
Translittération	nezumi-iro
Tradition	Couleurs traditionnelles japonaises
Attribut	Hiver
Famille	Gris
HEX	#7D7D7D
RGB	rgb(125,125,125)
HSL	hsl(0 0% 49%)
HSV	hsv(0, 0%, 49%)
OKLCH	oklch(0.590 0.000 89.9)
LAB	lab(52.41 -0.00 0.00)
XYZ	19,21,22
CMYK	cmyk(0.0% 0.0% 0.0% 51.0%)
RAL	#7C7F7E · Dusty grey · RAL 7037

À propos de cette couleur

nezumi-iroGrisCouleurs traditionnelles japonaises

Structure calme, précision nette

鼠色 se situe à #7D7D7D, un ton de la famille Gris à la généalogie culturelle nette. Lu seul, il appartient à cette famille ; ses attaches (Couleurs traditionnelles japonaises) lui ajoutent une seconde couche de sens.

Conseil design

Testez 鼠色 (#7D7D7D) d’abord sur une surface neutre : un accent de la famille Gris le fera paraître voulu plutôt que décoratif.

Usage idéal

Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.

neutreprécisstructurédiscretprofessionnel

Psychologie

Perception

neutreprécisstructurédiscretprofessionnel

Effet psychologique

鼠色 relève l’énergie perçue d’une composition Gris et attire l’œil vers l’action.

Impact émotionnel

Il paraît immédiat et chaleureux : il peut rehausser une mise en page sobre sans la rendre bruyante.

Symbolique

Ce qu’il représente

stabiliténeutralité et sophistication

Portée culturelle

Dans un contexte marqué par Couleurs traditionnelles japonaises, le ton porte des références locales : vérifiez sa symbolique avant une campagne.

Associations positives

Les associations positives penchent vers stabilité, neutralité et sophistication, d’où sa présence sur les invitations et les travaux saisonniers.

À manier avec prudence

Une surface trop large se lit comme indifférence ou morosité s’il reste sans relief : gardez-le en accents et en petits aplats.

Où il apparaît

Applications design courantes

Pages d’atterrissage de campagne: Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.
Systèmes de couverture éditoriale: Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.
Étiquettes de packaging produit: Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.
Accents d’état sur tableau de bord: Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.
Signalétique de commerce: Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.

Recommandations

Comment bien l’employer

À faire

Gardez les aplats saturés sous vingt pour cent de la mise en page.
Réservez-le à l’appel à l’action principal, sans autre usage.
Vérifiez l’association en petit format sur un fond neutre.

À éviter

Ne le placez pas près de verts néon ou de bleus électriques.
Ne l’utilisez jamais pour un long texte courant sur blanc.
Évitez les dégradés qui déplacent la teinte vers une autre famille.

Affinité de marque

architecture, technologie, automobile, édition

Les marques fondées sur Le Sage, Le Souverain s’en servent pour afficher leur caractère avant même de parler.

Signal de tendance

Structure calme, précision nette

Le gris est la couleur de l’intervalle et de l’infrastructure : il sépare les teintes sans rivaliser. Les gris chauds paraissent tactiles, les froids paraissent techniques.

Association

Couleurs qui le complètent

#7D7D7Dmises en page éditoriales qui ont besoin d’un point focal chaud

#4A4A4Ainterfaces où un accent doit rester lisible

#7D7D7Dpackagings qui doivent sembler appétissants sans crier

Histoire

Pigments et origine

Avant les colorants de synthèse, 鼠色 se composait à partir de pigments minéraux et végétaux ; la famille Gris dépendait de l’ocre, de la garance et de l’indigo. Les écrans le restituent aujourd’hui plus régulièrement qu’aucun pigment isolé.

Étiquettes

neutreprécisstructurédiscretprofessionnelstabiliténeutralité et sophisticationGris

Origines & sources

Étymologie: « Nezumi-iro » reprend la couleur du pelage de souris ; les gris japonais sont finement gradués, les « cent souris ».

Références

Variations

Les ombres foncent et les clairs éclaircissent sans déplacer l’angle de teinte.

Astuce pro: Les ombres foncent et les clairs éclaircissent sans déplacer l’angle de teinte.

Ombres

Des paliers plus sombres dans la même teinte.

0% #7D7D7D

10% #717171

20% #646464

30% #585858

40% #4B4B4B

50% #3F3F3F

60% #323232

70% #262626

80% #191919

90% #0C0C0C

100% #000000

Clairs

Des paliers plus clairs pour les surfaces et les fonds.

0% #7D7D7D

10% #8A8A8A

20% #979797

30% #A4A4A4

40% #B1B1B1

50% #BEBEBE

60% #CBCBCB

70% #D8D8D8

80% #E5E5E5

90% #F2F2F2

100% #FFFFFF

Échelle de design 50–950

50#F5F5F5100#EDEDED200#D9D9D9300#C2C2C2400#A9A9A9500#8A8A8A600#737373700#5C5C5C800#464646900#313131950#202020

Valeur mode sombre (AA): #7D7D7D · 4.58:1

Cas d’usage

Ombres → survol, ombres, profondeur
Clairs → reflets, surfaces
Équilibre → systèmes de couleur cohérents

Astuce de conception

Un ton dominant, un ton de soutien et un accent suffisent.

Comparer les systèmes de couleur

La couleur nommée la plus proche dans chaque tradition et système de design, mesurée en OKLCH ΔE. Plus la valeur est petite, plus c'est proche.

Traditions asiatiques

鼠色 JP ΔE 0.000

硅 KR ΔE 0.049

绾 CN ΔE 0.076

Tout afficher (6)

孔雀绿 TB ΔE 0.097

Hijau ID ΔE 0.100

Ногоон MN ΔE 0.107

मेहंदी IN ΔE 0.118

สีเขียว TH ΔE 0.149

Xanh VN ΔE 0.157

Systèmes de design

Secondary StyleX ΔE 0.010

Grey 4 Ant Design ΔE 0.010

Sand 10 Radix ΔE 0.018

Tout afficher (11)

Neutral 50 Material ΔE 0.022

Olive 500 Tailwind ΔE 0.032

Neutral 500 UnoCSS ΔE 0.034

Neutral 500 Panda ΔE 0.034

Secondary Bootstrap ΔE 0.036

Gray 500 Chakra ΔE 0.039

Gray 12 Polaris ΔE 0.044

Neutral muted Primer ΔE 0.049

Gray 600 Open Color ΔE 0.055

Office 40 Fluent ΔE 0.148

Brand (contract) vanilla-extract ΔE 0.269

RAL Classic

Dusty grey · RAL 7037 RAL ΔE 0.006

Essayer une couleur

Position dans la bibliothèque

Ces chiffres proviennent d’un classement de l’ensemble des 116 couleurs traditionnelles du site, calculé au build — pas d’une description rédigée à la main.

Clarté L* 52.4 — rang 59 sur 116 (tiers médian).
Chroma C 0.000 — rang 113 (faible chroma).
Teinte 0°, famille gris neutres.
Plus proche voisin dans la même famille de teinte : « 焦茶 », ΔE OK 0.222.

Trois paliers d’une même teinte peuvent-ils cohabiter

Trois paliers de l’échelle 50–950 de « 鼠色 » : même teinte, seule la clarté change. Voici le contraste WCAG lorsque l’un sert de texte sur l’autre.

200#D9D9D9

500#8A8A8A

800#464646

200 ↔ 500 : 2.45:1 (FAIL)
500 ↔ 800 : 2.73:1 (FAIL)
200 ↔ 800 : 6.69:1 (AA)

Paires atteignant 4,5:1 (texte courant AA) : 1 sur 3. Paires atteignant 3:1 (grands textes, icônes, bordures) : 1 sur 3. Les autres restent sous 3:1 et ne devraient pas porter de texte.

Combinaisons de couleurs

Faites tourner le cercle chromatique en gardant la clarté stable.

Comment l’utiliser

Trois gestes gardent la couleur lisible et intentionnelle.

Pourquoi ça marche

Le raisonnement perceptif derrière la palette.

Les six palettes sont obtenues par rotation de teinte à clarté comparable : le meilleur contraste interne se situe entre 1.59:1 et 1.68:1. Utilisez-les pour des aplats, graphiques et formes plutôt que comme texte l’une sur l’autre ; pour du texte, prenez une couleur neutre ou un palier plus sombre de la même échelle.

Complémentaire

À l’opposé du cercle chromatique ; le contraste avive la couleur focale.

#7D7D7D #7D7D7D

Usage idéal: Appels à l’action et mises en avant d’une fonction

Complémentaire divisée

Deux voisines de la teinte opposée ; plus douce qu’un complémentaire direct.

#7D7D7D #7D7D7D #7D7D7D

Usage idéal: Supports marketing équilibrés à deux accents

Triadique

Trois teintes équidistantes ; vivante mais demande une voix dominante.

#7D7D7D #7D7D7D #7D7D7D

Usage idéal: Identités d’événement et doubles pages ludiques

Analogue

Teintes voisines sur le cercle ; calme, cohérente et facile à parcourir.

#7D7D7D #7D7D7D #7D7D7D

Usage idéal: Fonds, graphiques et pages produit apaisées

Monochromatique

Une seule teinte déclinée en clarté ; disciplinée et haut de gamme.

#5A5A5A#7D7D7D#A1A1A1

Usage idéal: Systèmes de design, packaging et hiérarchie typographique

Tétradique

Deux paires complémentaires ; riche, mais exige des proportions strictes.

#7D7D7D #7D7D7D #7D7D7D #7D7D7D

Usage idéal: Tableaux de bord complexes et marques multi-services

Exporter l’échelle

CSS

:root {
  --brand-50: #F5F5F5;
  --brand-100: #EDEDED;
  --brand-200: #D9D9D9;
  --brand-300: #C2C2C2;
  --brand-400: #A9A9A9;
  --brand-500: #8A8A8A;
  --brand-600: #737373;
  --brand-700: #5C5C5C;
  --brand-800: #464646;
  --brand-900: #313131;
  --brand-950: #202020;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F5F5F5',
        100: '#EDEDED',
        200: '#D9D9D9',
        300: '#C2C2C2',
        400: '#A9A9A9',
        500: '#8A8A8A',
        600: '#737373',
        700: '#5C5C5C',
        800: '#464646',
        900: '#313131',
        950: '#202020',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F5F5F5"
    },
    "100": {
      "$type": "color",
      "$value": "#EDEDED"
    },
    "200": {
      "$type": "color",
      "$value": "#D9D9D9"
    },
    "300": {
      "$type": "color",
      "$value": "#C2C2C2"
    },
    "400": {
      "$type": "color",
      "$value": "#A9A9A9"
    },
    "500": {
      "$type": "color",
      "$value": "#8A8A8A"
    },
    "600": {
      "$type": "color",
      "$value": "#737373"
    },
    "700": {
      "$type": "color",
      "$value": "#5C5C5C"
    },
    "800": {
      "$type": "color",
      "$value": "#464646"
    },
    "900": {
      "$type": "color",
      "$value": "#313131"
    },
    "950": {
      "$type": "color",
      "$value": "#202020"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F5F5F5"/>
  <rect x="100" y="0" width="100" height="90" fill="#EDEDED"/>
  <rect x="200" y="0" width="100" height="90" fill="#D9D9D9"/>
  <rect x="300" y="0" width="100" height="90" fill="#C2C2C2"/>
  <rect x="400" y="0" width="100" height="90" fill="#A9A9A9"/>
  <rect x="500" y="0" width="100" height="90" fill="#8A8A8A"/>
  <rect x="600" y="0" width="100" height="90" fill="#737373"/>
  <rect x="700" y="0" width="100" height="90" fill="#5C5C5C"/>
  <rect x="800" y="0" width="100" height="90" fill="#464646"/>
  <rect x="900" y="0" width="100" height="90" fill="#313131"/>
  <rect x="1000" y="0" width="100" height="90" fill="#202020"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 0.961, green: 0.961, blue: 0.961, alpha: 1.0)
  static let brand100 = UIColor(red: 0.929, green: 0.929, blue: 0.929, alpha: 1.0)
  static let brand200 = UIColor(red: 0.851, green: 0.851, blue: 0.851, alpha: 1.0)
  static let brand300 = UIColor(red: 0.761, green: 0.761, blue: 0.761, alpha: 1.0)
  static let brand400 = UIColor(red: 0.663, green: 0.663, blue: 0.663, alpha: 1.0)
  static let brand500 = UIColor(red: 0.541, green: 0.541, blue: 0.541, alpha: 1.0)
  static let brand600 = UIColor(red: 0.451, green: 0.451, blue: 0.451, alpha: 1.0)
  static let brand700 = UIColor(red: 0.361, green: 0.361, blue: 0.361, alpha: 1.0)
  static let brand800 = UIColor(red: 0.275, green: 0.275, blue: 0.275, alpha: 1.0)
  static let brand900 = UIColor(red: 0.192, green: 0.192, blue: 0.192, alpha: 1.0)
  static let brand950 = UIColor(red: 0.125, green: 0.125, blue: 0.125, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F5F5F5</color>
  <color name="brand_100">#EDEDED</color>
  <color name="brand_200">#D9D9D9</color>
  <color name="brand_300">#C2C2C2</color>
  <color name="brand_400">#A9A9A9</color>
  <color name="brand_500">#8A8A8A</color>
  <color name="brand_600">#737373</color>
  <color name="brand_700">#5C5C5C</color>
  <color name="brand_800">#464646</color>
  <color name="brand_900">#313131</color>
  <color name="brand_950">#202020</color>
</resources>

Principes

Équilibre

Un ton dominant, un ton de soutien et un accent suffisent.

Contraste

Testez le texte courant sur blanc et sur noir avant publication.

Harmonie

Faites tourner le cercle chromatique en gardant la clarté stable.

Vérification du contraste

Testez le texte courant sur blanc et sur noir avant publication.

Couleur du texte

Fond

4.12 :1

FAIL

Citation

Réservez 鼠色 à l’élément qui doit être vu en premier ; le reste de la palette Gris le soutient.

Contraste WCAG

Aperçu

Aa / Bb

#7D7D7D · 鼠色

Normes de contraste WCAG

WCAG 2.2 fixe un contraste minimal pour le texte et les éléments d’interface. #7D7D7D mesure 4.12:1 sur blanc (FAIL) et 4.59:1 sur noir (AA). Utilisez le tableau ci-dessous pour choisir le seuil adapté à la taille du texte.

Niveau	Texte normal	Grand texte (18pt+ / 14pt gras)	Icônes & éléments d’UI
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Échec	< 4.5 : 1	< 3 : 1	< 3 : 1

Le grand texte correspond à 18pt normal ou 14pt gras. Les éléments d’UI exigent 3:1 face aux couleurs voisines. AA est la base courante, AAA le niveau renforcé.

Formats techniques

Notation selon les espaces colorimétriques

HEX

#7D7D7D

CSS Color 4

RGB

125,125,125

sRGB / D65

HSL

0,0,49

HSL

OKLCH

oklch(0.590 0.000 89.9)

perceptual

LAB

52,0,0

CIE Lab

LCH

52,0,158

CIE LCH

XYZ

19,21,22

CIE XYZ

LUV

52,0,0

CIE LUV

HWB

0,49,51

CSS HWB

CMYK

0,0,0,51

Formats pratiques

Valeurs prêtes à l’emploi

CSS

color: #7D7D7D;

custom properties

Tailwind

bg-[#7D7D7D] text-[#FFF]

arbitrary value

Android

#FF7D7D7D

ARGB

Flutter

Color(0xFF7D7D7D)

dart:ui

Photoshop

R 125 G 125 B 125 · C 0 M 0 Y 0 K 51

RGB / CMYK

CMYK 0,0,0,51

FOGRA39

Analyse de la couleur

Propriétés mesurées

Clarté

0.205

relative luminance · warm

Contraste

4.12 : 1

vs white · FAIL · warm

Contraste

4.59 : 1

vs black · AA · warm

Teinte

0°

saturation 0% · warm

LCH

52,0,158

lightness 49% · warm

ΔE

30.9

焦茶 #533A29 · warm

Couleurs proches

Les couleurs les plus proches de la bibliothèque Irodori, classées par ΔE.

Gris #808080ΔE 1.2 Gris #707070ΔE 5.2 Gris #696969ΔE 8.0 硅 #7E8B99ΔE 10.4 Moyen Bleu #708090ΔE 10.8 Gris #999999ΔE 10.8

Simulateur de daltonisme

Rendu en cas de déficience visuelle des couleurs

Rendu en cas de déficience visuelle des couleurs · ΔE 30.9