@extends('layouts.app')
@section('title', 'Farb Konverter – HEX RGB HSL CMYK umrechnen | kotsch.tech')
@section('meta_description', 'Farben online umrechnen: HEX zu RGB, HSL, CMYK und zurück. Farbwähler, Kontrastverhältnis WCAG und beliebte Farbpaletten – kostenlos.')
@section('meta_extra')
<meta name="keywords" content="Farb Konverter, HEX RGB umrechnen, HSL Konverter, CMYK Farbe, Farbwähler online, Kontrastverhältnis WCAG">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.color-preview { width:100%; height:120px; border-radius:var(--radius-md); margin-bottom:16px; border:1px solid var(--line); transition:background 0.2s; }
.swatch-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.swatch { width:34px; height:34px; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:all 0.15s; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.swatch:hover { transform:scale(1.15); border-color:var(--ink); }
.copy-field { display:flex; gap:8px; align-items:center; }
.copy-field input { flex:1; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-palette"></i> Design</span>
        <h1 class="tool-h1">Farb<span>konverter.</span></h1>
        <p class="tool-sub">HEX, RGB, HSL und CMYK sofort umrechnen – mit Farbwähler und WCAG-Kontrastcheck.</p>
    </div>

    <div class="t-panel">
        <div class="color-preview" id="colorPreview" style="background:#10b981"></div>
        <div style="text-align:center;margin-bottom:16px">
            <input type="color" id="colorPicker" value="#10b981"
                style="width:60px;height:60px;border:2px solid var(--line);border-radius:14px;padding:4px;cursor:pointer;background:none"
                oninput="fromPicker(this.value)">
            <span style="font-size:0.8rem;color:var(--muted);font-weight:700;display:block;margin-top:4px">Farbe wählen</span>
        </div>

        <div class="t-grid-2">
            <div class="t-field">
                <label class="t-label">HEX</label>
                <div class="copy-field">
                    <input type="text" class="t-input" id="hex" value="#10b981" maxlength="7" oninput="fromHex(this.value)" spellcheck="false">
                    <button class="t-btn sm ghost" onclick="copyVal('hex')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="t-field">
                <label class="t-label">RGB</label>
                <div class="copy-field">
                    <input type="text" class="t-input" id="rgb" oninput="fromRGB(this.value)" spellcheck="false">
                    <button class="t-btn sm ghost" onclick="copyVal('rgb')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="t-field">
                <label class="t-label">HSL</label>
                <div class="copy-field">
                    <input type="text" class="t-input" id="hsl" oninput="fromHSL(this.value)" spellcheck="false">
                    <button class="t-btn sm ghost" onclick="copyVal('hsl')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="t-field">
                <label class="t-label">CMYK</label>
                <div class="copy-field">
                    <input type="text" class="t-input" id="cmyk" readonly>
                    <button class="t-btn sm ghost" onclick="copyVal('cmyk')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-adjust"></i> WCAG Kontrast-Verhältnis</div>
        <div class="t-grid-2" style="margin-bottom:12px">
            <div class="t-stat-card" id="cw-card">
                <div class="t-stat-num" id="cw-ratio">–</div>
                <div class="t-stat-lbl">vs. Weiß <span id="cw-aa"></span></div>
            </div>
            <div class="t-stat-card" id="cb-card">
                <div class="t-stat-num" id="cb-ratio">–</div>
                <div class="t-stat-lbl">vs. Schwarz <span id="cb-aa"></span></div>
            </div>
        </div>
        <p class="t-info">WCAG AA: ≥ 4.5:1 (Fließtext), ≥ 3:1 (Großtext). WCAG AAA: ≥ 7:1</p>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-swatchbook"></i> Beliebte Farben</div>
        <div class="swatch-grid" id="swatches"></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const SWATCHES = ['#ef4444','#f97316','#f59e0b','#eab308','#84cc16','#22c55e','#10b981','#14b8a6','#06b6d4','#0ea5e9','#3b82f6','#6366f1','#8b5cf6','#a855f7','#ec4899','#f43f5e','#0f172a','#334155','#64748b','#94a3b8','#e2e8f0','#ffffff'];

function hexToRgb(hex) {
    hex = hex.replace('#','');
    if (hex.length===3) hex = hex.split('').map(c=>c+c).join('');
    const n = parseInt(hex,16);
    return {r:(n>>16)&255,g:(n>>8)&255,b:n&255};
}
function rgbToHex(r,g,b){ return '#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join(''); }
function rgbToHsl(r,g,b){
    r/=255;g/=255;b/=255;
    const max=Math.max(r,g,b),min=Math.min(r,g,b);
    let h,s,l=(max+min)/2;
    if(max===min){h=s=0;}else{
        const d=max-min;s=l>0.5?d/(2-max-min):d/(max+min);
        switch(max){case r:h=((g-b)/d+(g<b?6:0))/6;break;case g:h=((b-r)/d+2)/6;break;case b:h=((r-g)/d+4)/6;break;}
    }
    return {h:Math.round(h*360),s:Math.round(s*100),l:Math.round(l*100)};
}
function rgbToCmyk(r,g,b){
    r/=255;g/=255;b/=255;
    const k=1-Math.max(r,g,b);
    if(k===1) return {c:0,m:0,y:0,k:100};
    return {c:Math.round((1-r-k)/(1-k)*100),m:Math.round((1-g-k)/(1-k)*100),y:Math.round((1-b-k)/(1-k)*100),k:Math.round(k*100)};
}
function hslToRgb(h,s,l){
    s/=100;l/=100;
    const c=(1-Math.abs(2*l-1))*s,x=c*(1-Math.abs((h/60)%2-1)),m=l-c/2;
    let r=0,g=0,b=0;
    if(h<60){r=c;g=x;}else if(h<120){r=x;g=c;}else if(h<180){g=c;b=x;}else if(h<240){g=x;b=c;}else if(h<300){r=x;b=c;}else{r=c;b=x;}
    return {r:Math.round((r+m)*255),g:Math.round((g+m)*255),b:Math.round((b+m)*255)};
}
function luminance(r,g,b){
    const [rr,gg,bb]=[r,g,b].map(v=>{v/=255;return v<=0.04045?v/12.92:Math.pow((v+0.055)/1.055,2.4);});
    return 0.2126*rr+0.7152*gg+0.0722*bb;
}
function cr(l1,l2){ const b=Math.max(l1,l2),d=Math.min(l1,l2); return ((b+0.05)/(d+0.05)).toFixed(2); }

function updateAll(r,g,b){
    const hex=rgbToHex(r,g,b),hsl=rgbToHsl(r,g,b),cmyk=rgbToCmyk(r,g,b);
    document.getElementById('hex').value=hex;
    document.getElementById('rgb').value=`rgb(${r}, ${g}, ${b})`;
    document.getElementById('hsl').value=`hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
    document.getElementById('cmyk').value=`${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`;
    document.getElementById('colorPicker').value=hex;
    document.getElementById('colorPreview').style.background=hex;
    const lum=luminance(r,g,b);
    const cw=cr(lum,1),cb=cr(lum,0);
    document.getElementById('cw-ratio').textContent=cw+':1';
    document.getElementById('cb-ratio').textContent=cb+':1';
    const cwPass=parseFloat(cw)>=4.5,cbPass=parseFloat(cb)>=4.5;
    document.getElementById('cw-card').className='t-stat-card'+(cwPass?' accent':'');
    document.getElementById('cb-card').className='t-stat-card'+(cbPass?' accent':'');
    document.getElementById('cw-aa').textContent=cwPass?'✓ AA':'✗';
    document.getElementById('cb-aa').textContent=cbPass?'✓ AA':'✗';
}
function fromPicker(val){ document.getElementById('hex').value=val; fromHex(val); }
function fromHex(val){ val=val.trim(); if(!/^#[0-9a-fA-F]{6}$/.test(val))return; const{r,g,b}=hexToRgb(val); updateAll(r,g,b); }
function fromRGB(val){ const m=val.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/); if(!m)return; updateAll(+m[1],+m[2],+m[3]); }
function fromHSL(val){ const m=val.match(/(\d+)[,\s]+(\d+)%?[,\s]+(\d+)%?/); if(!m)return; const{r,g,b}=hslToRgb(+m[1],+m[2],+m[3]); updateAll(r,g,b); }
function copyVal(id){ navigator.clipboard.writeText(document.getElementById(id).value); }

const sg=document.getElementById('swatches');
SWATCHES.forEach(c=>{ const el=document.createElement('div'); el.className='swatch'; el.style.background=c; el.title=c; el.onclick=()=>{document.getElementById('hex').value=c;fromHex(c);}; sg.appendChild(el); });

fromHex('#10b981');
</script>

@include('tools._seo_content', ['toolSlug' => 'farb-konverter', 'toolName' => 'Farb-Konverter'])

@endsection