@jjlmoya/utils-developer 1.4.0 → 1.5.0

package/src/tool/colorConverter/i18n/de.ts

@@ -0,0 +1,126 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'farbkonverter-rgb-hex-hsl';
+const title = 'Online Farbkonverter RGB HEX und HSL';
+const description = 'Konvertieren Sie Farben sofort zwischen RGB, HEX und HSL. Generieren Sie komplementäre Farbharmonien und analysieren Sie den WCAG-Kontrast. 100 % clientseitig und privat.';
+
+const faqData = [
+  {
+    question: 'Wie funktioniert der Farbkonverter für RGB zu HEX und HSL?',
+    answer: 'Das Tool nimmt Rot-, Grün- und Blauwerte (RGB) und verwendet mathematische Algorithmen, um diese in ihr Hexadezimal-Äquivalent (HEX) oder in Werte für Farbton, Sättigung und Helligkeit (HSL) umzurechnen. Es funktioniert auch umgekehrt.',
+  },
+  {
+    question: 'Warum sollte ich in meinen Designs HSL anstelle von HEX verwenden?',
+    answer: 'Das HSL-Format ist viel intuitiver. Es ermöglicht Ihnen, Sättigung oder Helligkeit anzupassen, ohne den Farbton zu ändern, was das Erstellen harmonischer Paletten oder Schaltflächenzustände (Hover, Deaktiviert) erheblich erleichtert.',
+  },
+  {
+    question: 'Was ist der relative Kontrastwert?',
+    answer: 'Dies ist eine Kennzahl, die die Lesbarkeit von Text auf einem Hintergrund basierend auf seiner Luminanz angibt. Ein hoher Kontrast stellt sicher, dass Menschen mit Sehbehinderungen den Inhalt gemäß den WCAG-Barrierefreiheitsrichtlinien lesen können.',
+  },
+  {
+    question: 'Ist es sicher, diesen Online-Farbkonverter zu verwenden?',
+    answer: 'Absolut. Da er zu 100 % clientseitig ausgeführt wird, verlassen Ihre Farbdaten niemals Ihren Computer. Die gesamte Verarbeitung findet direkt in Ihrem Browser statt, was Privatsphäre und sofortige Leistung garantiert.',
+  },
+];
+
+const howToData = [
+  { name: 'Farbe auswählen', text: 'Verwenden Sie die Schieberegler für Rot, Grün und Blau oder geben Sie einen HEX-Code direkt in das Textfeld ein.' },
+  { name: 'RGB-Kanäle anpassen', text: 'Bewegen Sie die Schieberegler, um die Intensität jedes Kanals zu ändern und die Aktualisierung in Echtzeit zu sehen.' },
+  { name: 'Format kopieren', text: 'Klicken Sie auf die Schaltfläche „Kopieren“ neben dem HEX-, RGB- oder HSL-Format, das Sie benötigen.' },
+  { name: 'Harmonien erkunden', text: 'Klicken Sie auf die Harmoniefarben (komplementär, analog, triadisch), um sie in die Zwischenablage zu kopieren.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+const ui: ColorConverterUI = {
+  labelPreview: 'Vorschau (Klicken zum Kopieren von HEX)',
+  labelHarmonies: 'Farbharmonien',
+  labelR: 'Rot',
+  labelG: 'Grün',
+  labelB: 'Blau',
+  labelComp: 'Komp.',
+  labelAna1: 'Analog 1',
+  labelAna2: 'Analog 2',
+  labelTri1: 'Triade 1',
+  labelTri2: 'Triade 2',
+  btnCopy: 'Kopieren',
+  btnCopied: 'Kopiert',
+  contrastLabel: 'Kontrast',
+  clickToCopy: 'Klicken zum Kopieren',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Farben- und Webdesign-Ressourcen',
+  bibliography: [
+    { name: 'W3C: CSS-Farbdokumentation', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: HSL-Farbmodell-Leitfaden', url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: Kontrast- und Barrierefreiheitsleitfaden', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'RGB zu HEX und HSL Farbkonverter für Entwickler', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'In der Welt der <strong>Frontend-Entwicklung</strong> und des <strong>UI/UX-Designs</strong> ist Farbmanagement eine ständige Aufgabe. Unser <strong>Online-Farbkonverter</strong> ermöglicht es Ihnen, Werte zwischen <strong>HEX, RGB und HSL</strong> sofort und mit mathematischer Präzision umzuwandeln.',
+    },
+    { type: 'title', text: 'Farbformate: HEX, RGB und HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX (Hexadezimal):</strong> Der De-facto-Standard für CSS. Kompakt und einfach im Code zu teilen.',
+        '<strong>RGB (Rot, Grün, Blau):</strong> Basierend auf dem additiven Lichtsystem. Ideal für die direkte Manipulation von Kanälen oder die Anwendung von Transparenz mit RGBA.',
+        '<strong>HSL (Hue, Saturation, Lightness):</strong> Das intuitivste Format. Passen Sie Farbton, Sättigung und Helligkeit an, um harmonische Paletten zu erstellen.',
+      ],
+    },
+    { type: 'title', text: 'Kontrast und WCAG-Barrierefreiheit', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Der Rechner enthält eine <strong>relative Kontrastmessung</strong> basierend auf der Luminanz. Dies hilft Ihnen, die <strong>WCAG</strong>-Richtlinien einzuhalten und sicherzustellen, dass Ihr Text auf ausgewählten Hintergründen lesbar ist.',
+    },
+    { type: 'title', text: 'Automatische Farbharmonien', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Komplementär:</strong> Die gegenüberliegende Farbe im Farbkreis, ideal für maximalen Kontrast.',
+        '<strong>Analog:</strong> Benachbarte Farben, die sanfte, harmonische Übergänge schaffen.',
+        '<strong>Triadisch:</strong> Drei äquidistante Farben für lebendige, ausgewogene Kompositionen.',
+      ],
+    },
+  ],
+};

package/src/tool/colorConverter/i18n/id.ts

@@ -0,0 +1,126 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'konverter-warna-rgb-hex-hsl';
+const title = 'Konverter Warna Online RGB HEX dan HSL';
+const description = 'Konversikan warna antara RGB, HEX, dan HSL secara instan. Hasilkan harmoni warna komplementer dan analisis kontras WCAG. 100% sisi klien dan pribadi.';
+
+const faqData = [
+  {
+    question: 'Bagaimana cara kerja konverter warna RGB ke HEX dan HSL?',
+    answer: 'Alat ini mengambil nilai Merah, Hijau, dan Biru (RGB) dan menggunakan algoritma matematika untuk mengonversinya ke padanan heksadesimal (HEX) atau nilai Hue, Saturation, Lightness (HSL). Ini juga bekerja secara terbalik.',
+  },
+  {
+    question: 'Mengapa saya harus menggunakan HSL daripada HEX dalam desain saya?',
+    answer: 'Format HSL jauh lebih intuitif. Ini memungkinkan Anda menyesuaikan saturasi atau kecerahan tanpa mengubah corak warna (hue), sehingga jauh lebih mudah untuk membuat palet yang harmonis atau status tombol (hover, dinonaktifkan).',
+  },
+  {
+    question: 'Apa itu nilai kontras relatif?',
+    answer: 'Ini adalah metrik yang menunjukkan keterbacaan teks terhadap latar belakang berdasarkan luminansinya. Kontras tinggi memastikan orang dengan gangguan penglihatan dapat membaca konten, mengikuti pedoman aksesibilitas WCAG.',
+  },
+  {
+    question: 'Apakah aman menggunakan konverter warna online ini?',
+    answer: 'Tentu saja. Karena 100% berbasis sisi klien, data warna Anda tidak pernah meninggalkan komputer Anda. Semua pemrosesan terjadi langsung di browser Anda, menjamin privasi dan performa instan.',
+  },
+];
+
+const howToData = [
+  { name: 'Pilih Warna', text: 'Gunakan penggeser Merah, Hijau, dan Biru atau ketik kode HEX secara langsung ke kolom teks.' },
+  { name: 'Sesuaikan Saluran RGB', text: 'Gerakkan penggeser untuk mengubah intensitas setiap saluran dan lihat pembaruan waktu nyata.' },
+  { name: 'Salin Format', text: 'Klik tombol Salin di samping format HEX, RGB, atau HSL yang Anda butuhkan.' },
+  { name: 'Jelajahi Harmoni', text: 'Klik pada warna harmoni (komplementer, analog, triadik) untuk menyalinnya ke papan klip.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'id',
+};
+
+const ui: ColorConverterUI = {
+  labelPreview: 'Pratinjau (klik untuk menyalin HEX)',
+  labelHarmonies: 'Harmoni Warna',
+  labelR: 'Merah',
+  labelG: 'Hijau',
+  labelB: 'Biru',
+  labelComp: 'Komp.',
+  labelAna1: 'Analog 1',
+  labelAna2: 'Analog 2',
+  labelTri1: 'Triadik 1',
+  labelTri2: 'Triadik 2',
+  btnCopy: 'Salin',
+  btnCopied: 'Tersalin',
+  contrastLabel: 'Kontras',
+  clickToCopy: 'Klik untuk menyalin',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Sumber Daya Desain Warna dan Web',
+  bibliography: [
+    { name: 'W3C: Dokumentasi Warna CSS', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: Panduan Model Warna HSL', url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: Panduan Kontras dan Aksesibilitas', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Konverter Warna RGB ke HEX dan HSL untuk Pengembang', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Dalam dunia <strong>pengembangan frontend</strong> dan <strong>desain UI/UX</strong>, manajemen warna adalah tugas yang konstan. <strong>Konverter warna online</strong> kami memungkinkan Anda mengubah nilai antara <strong>HEX, RGB, dan HSL</strong> secara instan dan dengan presisi matematis.',
+    },
+    { type: 'title', text: 'Format Warna: HEX, RGB, dan HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX (Heksadesimal):</strong> Standar de facto untuk CSS. Ringkas dan mudah dibagikan dalam kode.',
+        '<strong>RGB (Merah, Hijau, Biru):</strong> Berdasarkan sistem cahaya aditif. Ideal untuk memanipulasi saluran secara langsung atau menerapkan transparansi dengan RGBA.',
+        '<strong>HSL (Hue, Saturation, Lightness):</strong> Format yang paling intuitif. Sesuaikan hue, saturasi, dan kecerahan untuk membuat palet yang harmonis.',
+      ],
+    },
+    { type: 'title', text: 'Kontras dan Aksesibilitas WCAG', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Kalkulator ini mencakup pengukuran <strong>kontras relatif</strong> berdasarkan luminansi. Ini membantu Anda memenuhi pedoman <strong>WCAG</strong>, memastikan teks Anda terbaca di latar belakang yang dipilih.',
+    },
+    { type: 'title', text: 'Harmoni Warna Otomatis', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Komplementer:</strong> Warna yang berlawanan pada roda warna, ideal untuk kontras maksimum.',
+        '<strong>Analog:</strong> Warna-warna berdekatan yang menciptakan transisi halus dan harmonis.',
+        '<strong>Triadik:</strong> Tiga warna berjarak sama untuk komposisi yang semarak dan seimbang.',
+      ],
+    },
+  ],
+};

package/src/tool/colorConverter/i18n/it.ts

@@ -0,0 +1,126 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'convertitore-colore-rgb-hex-hsl';
+const title = 'Convertitore Colore Online RGB HEX e HSL';
+const description = 'Converti i colori tra RGB, HEX e HSL istantaneamente. Genera armonie cromatiche complementari e analizza il contrasto WCAG. 100% lato client e privato.';
+
+const faqData = [
+  {
+    question: 'Come funziona il convertitore di colori da RGB a HEX e HSL?',
+    answer: 'Lo strumento prende i valori di Rosso, Verde e Blu (RGB) e utilizza algoritmi matematici per convertirli nel loro equivalente esadecimale (HEX) o nei valori di Tonalità, Saturazione, Luminosità (HSL). Funziona anche al contrario.',
+  },
+  {
+    question: 'Perché dovrei usare HSL invece di HEX nei miei progetti?',
+    answer: 'Il formato HSL è molto più intuitivo. Permette di regolare la saturazione o la luminosità senza cambiare la tonalità, rendendo molto più facile creare tavolozze armoniche o stati dei pulsanti (hover, disabilitato).',
+  },
+  {
+    question: 'Cos\'è il valore di contrasto relativo?',
+    answer: 'È una metrica che indica la leggibilità del testo rispetto a uno sfondo basata sulla sua luminanza. Un contrasto elevato assicura che le persone con disabilità visive possano leggere il contenuto, seguendo le linee guida sull\'accessibilità WCAG.',
+  },
+  {
+    question: 'È sicuro usare questo convertitore di colori online?',
+    answer: 'Assolutamente sì. Essendo al 100% lato client, i dati sui tuoi colori non lasciano mai il tuo computer. Tutta l\'elaborazione avviene direttamente nel tuo browser, garantendo privacy e prestazioni istantanee.',
+  },
+];
+
+const howToData = [
+  { name: 'Seleziona un colore', text: 'Usa i cursori Rosso, Verde e Blu o digita un codice HEX direttamente nel campo di testo.' },
+  { name: 'Regola i canali RGB', text: 'Sposta i cursori per cambiare l\'intensità di ogni canale e vedere l\'aggiornamento in tempo reale.' },
+  { name: 'Copia il formato', text: 'Fai clic sul pulsante Copia accanto al formato HEX, RGB o HSL di cui hai bisogno.' },
+  { name: 'Esplora le armonie', text: 'Fai clic sui colori delle armonie (complementari, analoghi, triadici) per copiarli negli appunti.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'it',
+};
+
+const ui: ColorConverterUI = {
+  labelPreview: 'Anteprima (clicca per copiare HEX)',
+  labelHarmonies: 'Armonie Cromatiche',
+  labelR: 'Rosso',
+  labelG: 'Verde',
+  labelB: 'Blu',
+  labelComp: 'Comp.',
+  labelAna1: 'Analogo 1',
+  labelAna2: 'Analogo 2',
+  labelTri1: 'Triade 1',
+  labelTri2: 'Triade 2',
+  btnCopy: 'Copia',
+  btnCopied: 'Copiato',
+  contrastLabel: 'Contrasto',
+  clickToCopy: 'Clicca per copiare',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Risorse di Design del Colore e Web',
+  bibliography: [
+    { name: 'W3C: Documentazione del colore CSS', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: Guida al modello di colore HSL', url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: Guida al contrasto e all\'accessibilità', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Convertitore Colore da RGB a HEX e HSL per Sviluppatori', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Nel mondo dello <strong>sviluppo frontend</strong> e del <strong>design UI/UX</strong>, la gestione del colore è un compito costante. Il nostro <strong>convertitore di colori online</strong> ti permette di trasformare i valori tra <strong>HEX, RGB e HSL</strong> istantaneamente e con precisione matematica.',
+    },
+    { type: 'title', text: 'Formati di Colore: HEX, RGB e HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX (Esadecimale):</strong> Lo standard di fatto per i CSS. Compatto e facile da condividere nel codice.',
+        '<strong>RGB (Red, Green, Blue):</strong> Basato sul sistema di luce additiva. Ideale per manipolare i canali direttamente o applicare la trasparenza con RGBA.',
+        '<strong>HSL (Hue, Saturation, Lightness):</strong> Il formato più intuitivo. Regola tonalità, saturazione e luminosità per creare tavolozze armoniche.',
+      ],
+    },
+    { type: 'title', text: 'Contrasto e accessibilità WCAG', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Il calcolatore include una misurazione del <strong>contrasto relativo</strong> basata sulla luminanza. Questo ti aiuta a rispettare le linee guida <strong>WCAG</strong>, assicurando che il tuo testo sia leggibile rispetto agli sfondi selezionati.',
+    },
+    { type: 'title', text: 'Armonie automatiche dei colori', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Complementare:</strong> Il colore opposto sulla ruota dei colori, ideale per il massimo contrasto.',
+        '<strong>Analogo:</strong> Colori adiacenti che creano transizioni morbide e armoniche.',
+        '<strong>Triadico:</strong> Tre colori equidistanti per composizioni vibranti e bilanciate.',
+      ],
+    },
+  ],
+};

package/src/tool/colorConverter/i18n/ja.ts

@@ -0,0 +1,127 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'color-converter-rgb-hex-hsl';
+const title = 'オンライン・カラーコンバーター：RGB, HEX, HSL';
+const description = 'RGB、HEX、HSL間ですぐに色を変換できます。補色ハーモニーの生成やWCAGコントラストの分析も可能。100%クライアントサイドでプライバシーも安心。';
+
+const faqData = [
+  {
+    question: 'RGBからHEXやHSLへのカラーコンバーターはどのように機能しますか？',
+    answer: 'このツールは赤、緑、青（RGB）の値を受け取り、数学的アルゴリズムを使用して、それらに相当する16進数（HEX）や、色相、彩度、輝度（HSL）の値に変換します。逆の変換も可能です。',
+  },
+  {
+    question: 'デザインでHEXの代わりにHSLを使用すべきなのはなぜですか？',
+    answer: 'HSL形式は非常に直感的だからです。色相を変えずに彩度や輝度を調整できるため、調和のとれたパレットやボタンの状態（ホバー、無効）をはるかに簡単に作成できます。',
+  },
+  {
+    question: '相対コントラスト値とは何ですか？',
+    answer: '輝度に基づいて、背景に対するテキストの読みやすさを示す指標です。ハイコントラストを維持することで、WCAGのアクセシビリティ・ガイドラインに従い、視覚障害のある方でもコンテンツを読めるようになります。',
+  },
+  {
+    question: 'このオンライン・カラーコンバーターを使っても安全ですか？',
+    answer: 'はい、もちろんです。100%クライアントサイドで動作するため、色のデータがコンピュータの外に出ることはありません。すべての処理はブラウザ内で直接行われるため、プライバシーと即時のパフォーマンスが保証されます。',
+  },
+];
+
+const howToData = [
+  { name: '色を選択する', text: '赤、緑、青のスライダーを使用するか、テキストフィールドにHEXコードを直接入力します。' },
+  { name: 'RGBチャンネルを調整する', text: 'スライダーを動かして各チャンネルの強度を変更し、リアルタイムの更新を確認します。' },
+  { name: '形式をコピーする', text: '必要なHEX、RGB、HSL形式の隣にある「コピー」ボタンをクリックします。' },
+  { name: 'ハーモニーを探索する', text: 'ハーモニーカラー（補色、類似色、三補色）をクリックして、クリップボードにコピーします。' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ja',
+};
+
+const ui: ColorConverterUI = {
+  labelPreview: 'プレビュー（クリックでHEXをコピー）',
+  labelHarmonies: 'カラーハーモニー',
+  labelR: '赤',
+  labelG: '緑',
+  labelB: '青',
+  labelComp: '補色',
+  labelAna1: '類似 1',
+  labelAna2: '類似 2',
+  labelTri1: '三補色 1',
+  labelTri2: '三補色 2',
+  btnCopy: 'コピー',
+  btnCopied: 'コピーしました',
+  contrastLabel: 'コントラスト',
+  clickToCopy: 'クリックしてコピー',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'よくある質問',
+  faq: faqData,
+  bibliographyTitle: '色とウェブデザインのリソース',
+  bibliography: [
+    { name: 'W3C: CSSカラー・ドキュメント', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: HSLカラーモデル・ガイド', url: 'https://developer.mozilla.org/ja/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: コントラストとアクセシビリティ・ガイド', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: '開発者のためのRGB・HEX・HSLカラーコンバーター', level: 2 },
+    {
+      type: 'paragraph',
+      html: '<strong>フロントエンド開発</strong>や<strong>UI/UXデザイン</strong>の世界では、色の管理は欠かせないタスクです。当社の<strong>オンライン・カラーコンバーター</strong>を使用すると、<strong>HEX、RGB、HSL</strong>の間で値を瞬時に、かつ数学的な精度で変換できます。',
+    },
+    { type: 'title', text: '色の形式：HEX, RGB, HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX（16進数）：</strong>CSSの事実上の標準です。コンパクトでコード内で共有しやすい形式です。',
+        '<strong>RGB（赤、緑、青）：</strong>加法混色に基づいています。チャンネルを直接操作したり、RGBAで透明度を適用したりするのに適しています。',
+        '<strong>HSL（色相、彩度、輝度）：</strong>最も直感的な形式です。色相、彩度、輝度を調整して、調和のとれたパレットを作成するのに最適です。',
+      ],
+    },
+    { type: 'title', text: 'コントラストとWCAGアクセシビリティ', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'この計算機には、輝度に基づく<strong>相対コントラスト</strong>の測定機能が含まれています。これにより、<strong>WCAG</strong>のガイドラインを満たし、選択した背景に対してテキストが読みやすいことを確認できます。',
+    },
+    { type: 'title', text: '自動カラーハーモニー', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>補色（Complementary）：</strong>色相環の反対側の色で、コントラストを最大化するのに最適です。',
+        '<strong>類似色（Analogous）：</strong>隣接する色で、滑らかで調和のとれた遷移を作り出します。',
+        '<strong>三補色（Triadic）：</strong>等間隔に配置された3つの色で、活気がありバランスの取れた構成を実現します。',
+      ],
+    },
+  ],
+};
+

package/src/tool/colorConverter/i18n/ko.ts

@@ -0,0 +1,127 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'color-converter-rgb-hex-hsl';
+const title = '온라인 컬러 컨버터 RGB HEX 및 HSL';
+const description = 'RGB, HEX, HSL 간에 색상을 즉시 변환하세요. 보색 조화를 생성하고 WCAG 대비를 분석합니다. 100% 클라이언트 측에서 실행되며 개인정보를 보호합니다.';
+
+const faqData = [
+  {
+    question: 'RGB에서 HEX 및 HSL로의 색상 변환기는 어떻게 작동하나요?',
+    answer: '이 도구는 빨강, 초록, 파랑(RGB) 값을 가져와 수학적 알고리즘을 사용하여 이에 해당하는 16진수(HEX) 또는 색상, 채도, 명도(HSL) 값으로 변환합니다. 반대 방향으로도 작동합니다.',
+  },
+  {
+    question: '디자인에서 HEX 대신 HSL을 사용해야 하는 이유는 무엇인가요?',
+    answer: 'HSL 형식은 훨씬 더 직관적이기 때문입니다. 색조를 바꾸지 않고 채도나 명도를 조절할 수 있어 조화로운 팔레트나 버튼 상태(호버, 비활성화)를 만들기가 훨씬 쉽습니다.',
+  },
+  {
+    question: '상대 대비 값이란 무엇인가요?',
+    answer: '휘도를 기준으로 배경에 대한 텍스트의 가독성을 나타내는 지표입니다. 높은 대비는 시각 장애가 있는 사람들도 WCAG 접근성 지침에 따라 콘텐츠를 읽을 수 있도록 보장합니다.',
+  },
+  {
+    question: '이 온라인 색상 변환기를 사용하는 것이 안전한가요?',
+    answer: '물론입니다. 100% 클라이언트 측에서 실행되므로 색상 데이터가 사용자의 컴퓨터를 떠나지 않습니다. 모든 처리가 브라우저 내에서 직접 이루어지므로 개인정보 보호와 즉각적인 성능을 보장합니다.',
+  },
+];
+
+const howToData = [
+  { name: '색상 선택', text: '빨강, 초록, 파랑 슬라이더를 사용하거나 텍스트 필드에 HEX 코드를 직접 입력하세요.' },
+  { name: 'RGB 채널 조정', text: '슬라이더를 움직여 각 채널의 강도를 변경하고 실시간 업데이트를 확인하세요.' },
+  { name: '형식 복사', text: '필요한 HEX, RGB 또는 HSL 형식 옆의 복사 버튼을 클릭하세요.' },
+  { name: '조화 탐색', text: '조화 색상(보색, 유사색, 삼보색)을 클릭하여 클립보드에 복사하세요.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ko',
+};
+
+const ui: ColorConverterUI = {
+  labelPreview: '미리보기 (HEX를 복사하려면 클릭)',
+  labelHarmonies: '색상 조화',
+  labelR: '빨강',
+  labelG: '초록',
+  labelB: '파랑',
+  labelComp: '보색',
+  labelAna1: '유사 1',
+  labelAna2: '유사 2',
+  labelTri1: '삼보색 1',
+  labelTri2: '삼보색 2',
+  btnCopy: '복사',
+  btnCopied: '복사됨',
+  contrastLabel: '대비',
+  clickToCopy: '클릭하여 복사',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '자주 묻는 질문',
+  faq: faqData,
+  bibliographyTitle: '색상 및 웹 디자인 리소스',
+  bibliography: [
+    { name: 'W3C: CSS 색상 문서', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: HSL 색상 모델 가이드', url: 'https://developer.mozilla.org/ko/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: 대비 및 접근성 가이드', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: '개발자를 위한 RGB에서 HEX 및 HSL 색상 변환기', level: 2 },
+    {
+      type: 'paragraph',
+      html: '<strong>프론트엔드 개발</strong> 및 <strong>UI/UX 디자인</strong>의 세계에서 색상 관리는 끊임없는 작업입니다. 당사의 <strong>온라인 색상 변환기</strong>를 사용하면 <strong>HEX, RGB, HSL</strong> 간의 값을 즉시 수학적 정밀도로 변환할 수 있습니다.',
+    },
+    { type: 'title', text: '색상 형식: HEX, RGB 및 HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX (16진수):</strong> CSS의 사실상 표준입니다. 작고 코드 내에서 공유하기 쉽습니다.',
+        '<strong>RGB (빨강, 초록, 파랑):</strong> 가산 혼합 시스템을 기반으로 합니다. 채널을 직접 조작하거나 RGBA로 투명도를 적용하는 데 이상적입니다.',
+        '<strong>HSL (색상, 채도, 명도):</strong> 가장 직관적인 형식입니다. 색조, 채도, 명도를 조정하여 조화로운 팔레트를 만드세요.',
+      ],
+    },
+    { type: 'title', text: '대비 및 WCAG 접근성', level: 3 },
+    {
+      type: 'paragraph',
+      html: '계산기에는 휘도를 기반으로 한 <strong>상대 대비</strong> 측정 기능이 포함되어 있습니다. 이를 통해 <strong>WCAG</strong> 지침을 준수하고 텍스트를 선택한 배경에서 읽을 수 있는지 확인할 수 있습니다.',
+    },
+    { type: 'title', text: '자동 색상 조화', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>보색 (Complementary):</strong> 색상환에서 반대되는 색상으로 최소 대비를 극대화하는 데 이상적입니다.',
+        '<strong>유사색 (Analogous):</strong> 부드럽고 조화로운 전환을 만드는 인접한 색상입니다.',
+        '<strong>삼보색 (Triadic):</strong> 활기차고 균형 잡힌 구성을 위한 세 가지 등거리 색상입니다.',
+      ],
+    },
+  ],
+};
+