#D93025 สีแดง

Q: Quelle couleur est #D93025 ?

สีแดง est #D93025, soit #D93025 en majuscules. En RGB : rgb(217,48,37) ; en HSL, environ hsl(4 71% 50%) ; en OKLCH : oklch(0.578 0.206 29.0).

Q: Comment utiliser สีแดง en design ?

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

Q: สีแดง est-il accessible ?

Le contraste est de 4.77 sur blanc (AA) et de 3.96 sur noir (FAIL). 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	si daeng
Tradition	Couleurs traditionnelles thaïlandaises
Famille	Orange
HEX	#D93025
RGB	rgb(217,48,37)
HSL	hsl(4 71% 50%)
HSV	hsv(4, 83%, 85%)
OKLCH	oklch(0.578 0.206 29.0)
LAB	lab(48.27 63.46 47.50)
XYZ	30,17,3
CMYK	cmyk(0.0% 77.9% 82.9% 14.9%)
RAL	#C63678 · Telemagenta · RAL 4010
Note	Sunday · Surya (Sun) · energy

À propos de cette couleur

si daengOrangeCouleurs traditionnelles thaïlandaises

Chaleur qui invite au sourire

สีแดง se situe à #D93025, un ton de la famille Orange à la généalogie culturelle nette. Lu seul, il appartient à cette famille ; ses attaches (Couleurs traditionnelles thaïlandaises) lui ajoutent une seconde couche de sens.

Conseil design

Testez สีแดง (#D93025) d’abord sur une surface neutre : un accent de la famille Orange 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 Orange le soutient.

chaleureuxludiqueamicalabordableénergique

Psychologie

Perception

chaleureuxludiqueamicalabordableénergique

Effet psychologique

สีแดง relève l’énergie perçue d’une composition Orange 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

convivialitécréativité et bon rapport qualité-prix

Portée culturelle

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

Associations positives

Les associations positives penchent vers convivialité, créativité et bon rapport qualité-prix, d’où sa présence sur les invitations et les travaux saisonniers.

À manier avec prudence

Une surface trop large se lit comme impression de bon marché ou de bruit : 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 Orange le soutient.
Systèmes de couverture éditoriale: Réservez สีแดง à l’élément qui doit être vu en premier ; le reste de la palette Orange le soutient.
Étiquettes de packaging produit: Réservez สีแดง à l’élément qui doit être vu en premier ; le reste de la palette Orange 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 Orange le soutient.
Signalétique de commerce: Réservez สีแดง à l’élément qui doit être vu en premier ; le reste de la palette Orange 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

alimentation, commerce, voyage, éducation

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

Signal de tendance

Chaleur qui invite au sourire

L’orange se tient entre la chaleur et la convivialité, plus proche de l’abricot ou de la terracotta que du néon. Il paraît fait main, généreux et un peu informel.

Association

Couleurs qui le complètent

#0095BAmises en page éditoriales qui ont besoin d’un point focal chaud

#980000interfaces où un accent doit rester lisible

#009824packagings 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 Orange 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

chaleureuxludiqueamicalabordableénergiqueconvivialitécréativité et bon rapport qualité-prixOrange

Origines & sources

Étymologie: 「สีแดง」意为红色，在泰国的「星期色」（สีประจำวัน）中对应星期日。

Translittération: si daeng

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% #D93025

10% #C32B21

20% #AE261E

30% #98221A

40% #821D16

50% #6D1813

60% #57130F

70% #410E0B

80% #2B0A07

90% #160504

100% #000000

Clairs

Des paliers plus clairs pour les surfaces et les fonds.

0% #D93025

10% #DD453B

20% #E15951

30% #E46E66

40% #E8837C

50% #EC9892

60% #F0ACA8

70% #F4C1BE

80% #F7D6D3

90% #FBEAE9

100% #FFFFFF

Échelle de design 50–950

50#FFE8DF100#FFD6C9200#FFB6A5300#FF9380400#FF6F5D500#EE4638600#CE2B21700#AC120D800#8A0000900#660000950#460000

Valeur mode sombre (AA): #E84133 · 4.70: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

สีแดง TH ΔE 0.000

紅 KR ΔE 0.009

緋 JP ΔE 0.011

Tout afficher (6)

朱砂 TB ΔE 0.048

Đỏ VN ΔE 0.048

朱砂 CN ΔE 0.048

Улаан MN ΔE 0.050

कुमकुम IN ΔE 0.055

Merah ID ΔE 0.073

Systèmes de design

Office 80 Fluent ΔE 0.008

Volcano 7 Ant Design ΔE 0.009

Red 600 UnoCSS ΔE 0.009

Tout afficher (11)

Red 600 Panda ΔE 0.009

Error 50 Material ΔE 0.011

Pink 700 Open Color ΔE 0.013

Danger Bootstrap ΔE 0.014

Tomato 11 Radix ΔE 0.015

Red 11 Polaris ΔE 0.018

Danger Primer ΔE 0.027

Orange 700 Tailwind ΔE 0.028

Pink 500 Chakra ΔE 0.033

Brand (contract) vanilla-extract ΔE 0.071

Secondary StyleX ΔE 0.212

RAL Classic

Telemagenta · RAL 4010 RAL ΔE 0.024

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* 48.3 — rang 65 sur 116 (tiers médian).
Chroma C 79.274 — rang 4 (chroma élevé).
Teinte 4°, famille famille des oranges.
Plus proche voisin dans la même famille de teinte : « สีชาด », ΔE OK 0.061.

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#FFB6A5

500#EE4638

800#8A0000

200 ↔ 500 : 2.24:1 (FAIL)
500 ↔ 800 : 2.68:1 (FAIL)
200 ↔ 800 : 6.00: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.01:1 et 1.65: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.

#D93025#0095BA

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.

#D93025#009D7C#0082E4

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

Triadique

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

#D93025#009824#4A6AF2

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

Analogue

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

#D12C77#D93025#CC4C00

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.

#9C231B#D93025#E46A62

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

Tétradique

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

#D93025#AA6C00#0095BA#4A6AF2

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

Exporter l’échelle

CSS

:root {
  --brand-50: #FFE8DF;
  --brand-100: #FFD6C9;
  --brand-200: #FFB6A5;
  --brand-300: #FF9380;
  --brand-400: #FF6F5D;
  --brand-500: #EE4638;
  --brand-600: #CE2B21;
  --brand-700: #AC120D;
  --brand-800: #8A0000;
  --brand-900: #660000;
  --brand-950: #460000;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FFE8DF',
        100: '#FFD6C9',
        200: '#FFB6A5',
        300: '#FF9380',
        400: '#FF6F5D',
        500: '#EE4638',
        600: '#CE2B21',
        700: '#AC120D',
        800: '#8A0000',
        900: '#660000',
        950: '#460000',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FFE8DF"
    },
    "100": {
      "$type": "color",
      "$value": "#FFD6C9"
    },
    "200": {
      "$type": "color",
      "$value": "#FFB6A5"
    },
    "300": {
      "$type": "color",
      "$value": "#FF9380"
    },
    "400": {
      "$type": "color",
      "$value": "#FF6F5D"
    },
    "500": {
      "$type": "color",
      "$value": "#EE4638"
    },
    "600": {
      "$type": "color",
      "$value": "#CE2B21"
    },
    "700": {
      "$type": "color",
      "$value": "#AC120D"
    },
    "800": {
      "$type": "color",
      "$value": "#8A0000"
    },
    "900": {
      "$type": "color",
      "$value": "#660000"
    },
    "950": {
      "$type": "color",
      "$value": "#460000"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FFE8DF"/>
  <rect x="100" y="0" width="100" height="90" fill="#FFD6C9"/>
  <rect x="200" y="0" width="100" height="90" fill="#FFB6A5"/>
  <rect x="300" y="0" width="100" height="90" fill="#FF9380"/>
  <rect x="400" y="0" width="100" height="90" fill="#FF6F5D"/>
  <rect x="500" y="0" width="100" height="90" fill="#EE4638"/>
  <rect x="600" y="0" width="100" height="90" fill="#CE2B21"/>
  <rect x="700" y="0" width="100" height="90" fill="#AC120D"/>
  <rect x="800" y="0" width="100" height="90" fill="#8A0000"/>
  <rect x="900" y="0" width="100" height="90" fill="#660000"/>
  <rect x="1000" y="0" width="100" height="90" fill="#460000"/>
  <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: 1.000, green: 0.910, blue: 0.875, alpha: 1.0)
  static let brand100 = UIColor(red: 1.000, green: 0.839, blue: 0.788, alpha: 1.0)
  static let brand200 = UIColor(red: 1.000, green: 0.714, blue: 0.647, alpha: 1.0)
  static let brand300 = UIColor(red: 1.000, green: 0.576, blue: 0.502, alpha: 1.0)
  static let brand400 = UIColor(red: 1.000, green: 0.435, blue: 0.365, alpha: 1.0)
  static let brand500 = UIColor(red: 0.933, green: 0.275, blue: 0.220, alpha: 1.0)
  static let brand600 = UIColor(red: 0.808, green: 0.169, blue: 0.129, alpha: 1.0)
  static let brand700 = UIColor(red: 0.675, green: 0.071, blue: 0.051, alpha: 1.0)
  static let brand800 = UIColor(red: 0.541, green: 0.000, blue: 0.000, alpha: 1.0)
  static let brand900 = UIColor(red: 0.400, green: 0.000, blue: 0.000, alpha: 1.0)
  static let brand950 = UIColor(red: 0.275, green: 0.000, blue: 0.000, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FFE8DF</color>
  <color name="brand_100">#FFD6C9</color>
  <color name="brand_200">#FFB6A5</color>
  <color name="brand_300">#FF9380</color>
  <color name="brand_400">#FF6F5D</color>
  <color name="brand_500">#EE4638</color>
  <color name="brand_600">#CE2B21</color>
  <color name="brand_700">#AC120D</color>
  <color name="brand_800">#8A0000</color>
  <color name="brand_900">#660000</color>
  <color name="brand_950">#460000</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.77 :1

Citation

Réservez สีแดง à l’élément qui doit être vu en premier ; le reste de la palette Orange le soutient.

Contraste WCAG

Aperçu

Aa / Bb

#D93025 · สีแดง

Normes de contraste WCAG

WCAG 2.2 fixe un contraste minimal pour le texte et les éléments d’interface. #D93025 mesure 4.77:1 sur blanc (AA) et 3.96:1 sur noir (FAIL). 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

#D93025

CSS Color 4

RGB

217,48,37

sRGB / D65

HSL

4,71,50

HSL

OKLCH

oklch(0.578 0.206 29.0)

perceptual

LAB

48,63,48

CIE Lab

LCH

48,79,37

CIE LCH

XYZ

30,17,3

CIE XYZ

LUV

48,131,31

CIE LUV

HWB

4,15,15

CSS HWB

CMYK

0,78,83,15

Formats pratiques

Valeurs prêtes à l’emploi

CSS

color: #D93025;

custom properties

Tailwind

bg-[#D93025] text-[#FFF]

arbitrary value

Android

#FFD93025

ARGB

Flutter

Color(0xFFD93025)

dart:ui

Photoshop

R 217 G 48 B 37 · C 0 M 78 Y 83 K 15

RGB / CMYK

CMYK 0,78,83,15

FOGRA39

Analyse de la couleur

Propriétés mesurées

Clarté

0.170

relative luminance · warm

Contraste

4.77 : 1

vs white · AA · warm

Contraste

3.96 : 1

vs black · FAIL · warm

Teinte

4°

saturation 71% · warm

LCH

48,79,37

lightness 50% · warm

ΔE

16.0

สีชาด #B93A26 · warm

Couleurs proches

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

朱 #E83929ΔE 5.0 緋 #D3381CΔE 5.7 Vif Rouge #F44336ΔE 7.8 Vif Rouge #EF4444ΔE 10.8 Vif Rouge #E60023ΔE 11.2 朱砂 #C3272BΔE 11.6

Simulateur de daltonisme

Rendu en cas de déficience visuelle des couleurs

Aperçu

#D93025

Protanopia

#4C4224

Deuteranopia

#715F23

Tritanopia

#FF212D

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