Hex Farben "berechnen"

schleckerbeck

schleckerbeck

Erfahrenes Mitglied
Hallo,

kann mir einer sagen wie die Hex-Farben im Web aufgebaut sind? Hab schon :google:, leider nix brauchbares gefunden. Grund ist, das ich eine Farbpallette ausgeben will, und dazu nicht alle Farben einzeln definieren will.

Danke,
sc.
 
hexadezimale Farbangaben werden meist als RGB-Wert widergegeben - Zeitweise mit einem zusätzlichen Alphakanal, also RGBA.
Die Werte sind ganz einfach beschreibbar: #rrggbb[aa], wobei der Alphawert in den meisten Darstellungssprachen zu vernachlässigen ist und zu Fehlern in der Auswertung führen kann.

Jeder Primärton tritt in einer Konzentration von 0 (0%) bis 255 (100%) auf, eine RGB-Primärfarbe kann also 255 Zustände besitzen. Da es drei Primärfarben im RGB-System gibt, lassen sich also 255^3 Farben insgesamt beschreiben (= 16.58 Mio Farben).
In PHP sähe die Ausgabe aller möglichen Farbangaben demnach folgendermaßen aus:
PHP: 
<?php
for ($r = 0; $r < 256; ++$r) {
    $hr = str_pad (dechex($r), 2, '0', STR_PAD_LEFT);
    for ($g = 0; $g < 256; ++$g) {
        $hg = str_pad (dechex($g), 2, '0', STR_PAD_LEFT);
        for ($b = 0; $b < 256; ++$b) {
            $hb = str_pad (dechex($b), 2, '0', STR_PAD_LEFT);
            echo "#{$hr}{$hg}{$hb}\n";
        }
    }
}

(Achtung, sehr speicherintensiv! Besser die Inkrementationsschritte erhöhen)
 
Das ist doch mal ne professionelle Erklärung. Danke, werd ich gleich mal ausprobieren.

PS: Sorry, hatte den Thread schon fast vergessen... :-)
 
So, bin jetzt endlich mal dazugekommen das Skript auszuprobieren. Funktioniert schon recht gut, doch leider sind die Farben eher "durcheinander". Wie kann ich die Farben denn nach schwarz - rot - blau etc. und deren Abstufungen von hell nach dunkel anordnen?

Danke,
sc.
 
Ordnung hineinzubringen ist relativ schwer, ich würde mich dort an die Gängigen Bildbearbeitungsprogramme halten und einen Farbverlauf Rot->Blau->Grün->Rot machen und sie So anordnen.

Der Code dazu sähe dann so aus:

PHP: 
<style>
tr {
height: 3px;
font-size: 3pt;
}
</style>

<table cellpadding="0" cellspacing="0" width="30px">
<?
$steps = 20;
// Ab Rot auf Pink
for ($i = 0;$i<=$steps;$i++){
    echo '<tr bgcolor="#FF00'.str_pad(dechex(round((255/$steps)*$i)),2,'0',STR_PAD_LEFT)."\"><td></td></tr>\n";
}
// Pink bis Blau
for ($i = 0;$i<=$steps;$i++){
    echo '<tr bgcolor="#'.str_pad(dechex(round((255/$steps)*($steps-$i))),2,'0',STR_PAD_LEFT)."00FF\"><td></td></tr>\n";
}
// Blau bis Cyan
for ($i = 0;$i<=$steps;$i++){
    echo '<tr bgcolor="#00'.str_pad(dechex(round((255/$steps)*$i)),2,'0',STR_PAD_LEFT)."FF\"><td></td></tr>\n";
}
// Cyan bis Grün
for ($i = 0;$i<=$steps;$i++){
    echo '<tr bgcolor="#00FF'.str_pad(dechex(round((255/$steps)*($steps-$i))),2,'0',STR_PAD_LEFT)."\"><td></td></tr>\n";
}
// Grün bis Gelb
for ($i = 0;$i<=$steps;$i++){
    echo '<tr bgcolor="#'.str_pad(dechex(round((255/$steps)*$i)),2,'0',STR_PAD_LEFT)."FF00\"><td></td></tr>\n";
}
// Gelb bis Rot
for ($i = 0;$i<=$steps;$i++){
    echo '<tr bgcolor="#FF'.str_pad(dechex(round((255/$steps)*($steps-$i))),2,'0',STR_PAD_LEFT)."00\"><td></td></tr>\n";
}
?>
</table>

Steps währe dazu da um zu bestimmen wie fein der verlauf sein soll.
 
Innerhalb der einzelnen Farbwerte - pro reihe addiert man auf jeden der Farbwerte den gleichen Wert auf. also R,G und B jeweils -10 = die Farbe ist ein wenig dunkler. Jeweils +10 und sie wird Heller. Den Wertungsbereich von 0...255 darf natürlich nicht verlassen werden.


Jetzt hättest du die wahl das man erst eine Farbe auswählt und dann die Helligkeitsstufe dazu. Oder das man sie paralell dazu auswählen kann. Oder du bringst das alles in einem Diagramm wieder.

Je mehr Zellen es werden, desto eher würde ich aber zu anderen Arten raten. z.B. per Javascript und den Koordinaten wo es angeklickt wurde, daraus die Farbe zu berechnen.

Aber eine PHP Version mit den Helligkeitswerten integriert sähe so ungefähr aus:

PHP: 
<style>
tr {
height: 5px;
font-size: 3pt;
}
</style>
<body bgcolor="#CCCCCC">
<table cellpadding="0" border="0" cellspacing="0" width="150">
<?
function modify($zahl, $shift){
    return max(min($zahl+$shift, 255), 0);
}


$steps = 10;
// Ab Rot auf Pink
for ($i = 0;$i<=$steps;$i++){
    // Mittel-farbwerte
    $color = array(255,0,round((255/$steps)*$i));
    
    echo '<tr>';
    for ($j=$steps*-1;$j<=$steps;$j++){
        $subcolor = array(modify($color[0],round(255/$steps*$j)), modify($color[1],round(255/$steps*$j)), modify($color[2],round(255/$steps*$j)));
        
        echo '<td bgcolor="#'.str_pad(dechex($subcolor[0]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[1]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[2]),2,'0',STR_PAD_LEFT)."\">".(($j == 0)?'&nbsp;&nbsp;&nbsp;':'&nbsp;')."</td>\n";
    }
    echo '</tr>';
}
// Pink bis Blau
for ($i = 0;$i<=$steps;$i++){
    // Mittel-farbwerte
    $color = array(round((255/$steps)*($steps-$i)),0,255);
    
    echo '<tr>';    
    for ($j=$steps*-1;$j<=$steps;$j++){
        $subcolor = array(modify($color[0],round(255/$steps*$j)), modify($color[1],round(255/$steps*$j)), modify($color[2],round(255/$steps*$j)));
        
        echo '<td bgcolor="#'.str_pad(dechex($subcolor[0]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[1]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[2]),2,'0',STR_PAD_LEFT)."\">".(($j == 0)?'&nbsp;&nbsp;&nbsp;':'&nbsp;')."</td>\n";
    }
    echo '</tr>';
}
// Blau bis Cyan
for ($i = 0;$i<=$steps;$i++){
    // Mittel-farbwerte
    $color = array(0,round((255/$steps)*$i),255);
    
    echo '<tr>';    
    for ($j=$steps*-1;$j<=$steps;$j++){
        $subcolor = array(modify($color[0],round(255/$steps*$j)), modify($color[1],round(255/$steps*$j)), modify($color[2],round(255/$steps*$j)));
        
        echo '<td bgcolor="#'.str_pad(dechex($subcolor[0]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[1]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[2]),2,'0',STR_PAD_LEFT)."\">".(($j == 0)?'&nbsp;&nbsp;&nbsp;':'&nbsp;')."</td>\n";
    }
    echo '</tr>';
}
// Cyan bis Grün
for ($i = 0;$i<=$steps;$i++){
    // Mittel-farbwerte
    $color = array(0,255,round((255/$steps)*($steps-$i)));
    
    echo '<tr>';    
    for ($j=$steps*-1;$j<=$steps;$j++){
        $subcolor = array(modify($color[0],round(255/$steps*$j)), modify($color[1],round(255/$steps*$j)), modify($color[2],round(255/$steps*$j)));
        
        echo '<td bgcolor="#'.str_pad(dechex($subcolor[0]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[1]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[2]),2,'0',STR_PAD_LEFT)."\">".(($j == 0)?'&nbsp;&nbsp;&nbsp;':'&nbsp;')."</td>\n";
    }
    echo '</tr>';
    
}
// Grün bis Gelb
for ($i = 0;$i<=$steps;$i++){
    // Mittel-farbwerte
    $color = array(round((255/$steps)*$i),255,0);
    
    echo '<tr>';
    for ($j=$steps*-1;$j<=$steps;$j++){
        $subcolor = array(modify($color[0],round(255/$steps*$j)), modify($color[1],round(255/$steps*$j)), modify($color[2],round(255/$steps*$j)));
        
        echo '<td bgcolor="#'.str_pad(dechex($subcolor[0]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[1]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[2]),2,'0',STR_PAD_LEFT)."\">".(($j == 0)?'&nbsp;&nbsp;&nbsp;':'&nbsp;')."</td>\n";
    }
    echo '</tr>';
}
// Gelb bis Rot
for ($i = 0;$i<=$steps;$i++){
    // Mittel-farbwerte
    $color = array(255,round((255/$steps)*($steps-$i)),0);
        
    echo '<tr>';
    for ($j=$steps*-1;$j<=$steps;$j++){
        $subcolor = array(modify($color[0],round(255/$steps*$j)), modify($color[1],round(255/$steps*$j)), modify($color[2],round(255/$steps*$j)));
        
        echo '<td bgcolor="#'.str_pad(dechex($subcolor[0]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[1]),2,'0',STR_PAD_LEFT).str_pad(dechex($subcolor[2]),2,'0',STR_PAD_LEFT)."\">".(($j == 0)?'&nbsp;&nbsp;&nbsp;':'&nbsp;')."</td>\n";
    }
    echo '</tr>';
}
?>
</table>
</body>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück