Random Well

Random Color Generator for Tables

On this page are 40 panels with background colors that were randomly generated. Each panel has a unique header, and Table row and alternate color. Refresh this page to see a completely different set of colors.

The Code to create the Panel/Table and Well are include.

Enjoy finding the perfect background color for your project!

Random Bootstrap Panels Color: Lira

.panel-default > .panel-heading-Lira {
background-image: none;
background: #661155;
color: white;
}

.Lira tr:nth-child(even) {background: #a37099;}
.Lira tr:nth-child(odd) {background: #d1b8cc;}

// Well Color Layout:
.Lira {background: #d1b8cc;} // Div Example class="well well-sm Gates"
.Gates {background: #a37099;} // Pre Example class="Lira"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Lira"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#a37099
New York, NYCarling HakesResearch AssistantTyco International#d1b8cc
Las Vegas, NVChariot FiskAccountantAndrew Corp.#a37099
Washington, DCLia GrammerResearch Assistant3Com#d1b8cc

Random Bootstrap Panels Color: Burg

.panel-default > .panel-heading-Burg {
background-image: none;
background: #775566;
color: white;
}

.Burg tr:nth-child(even) {background: #ad99a3;}
.Burg tr:nth-child(odd) {background: #d6ccd1;}

// Well Color Layout:
.Burg {background: #d6ccd1;} // Div Example class="well well-sm Foster"
.Foster {background: #ad99a3;} // Pre Example class="Burg"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Burg"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#ad99a3
New York, NYCarling HakesResearch AssistantTyco International#d6ccd1
Las Vegas, NVChariot FiskAccountantAndrew Corp.#ad99a3
Washington, DCLia GrammerResearch Assistant3Com#d6ccd1

Random Bootstrap Panels Color: Cello

.panel-default > .panel-heading-Cello {
background-image: none;
background: #cc55aa;
color: black;
}

.Cello tr:nth-child(even) {background: #e099cc;}
.Cello tr:nth-child(odd) {background: #f0cce6;}

// Well Color Layout:
.Cello {background: #f0cce6;} // Div Example class="well well-sm Fisher"
.Fisher {background: #e099cc;} // Pre Example class="Cello"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Cello"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#e099cc
New York, NYCarling HakesResearch AssistantTyco International#f0cce6
Las Vegas, NVChariot FiskAccountantAndrew Corp.#e099cc
Washington, DCLia GrammerResearch Assistant3Com#f0cce6

Random Bootstrap Panels Color: Linell

.panel-default > .panel-heading-Linell {
background-image: none;
background: #8822bb;
color: white;
}

.Linell tr:nth-child(even) {background: #b87ad6;}
.Linell tr:nth-child(odd) {background: #dbbdeb;}

// Well Color Layout:
.Linell {background: #dbbdeb;} // Div Example class="well well-sm Gorsline"
.Gorsline {background: #b87ad6;} // Pre Example class="Linell"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Linell"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#b87ad6
New York, NYCarling HakesResearch AssistantTyco International#dbbdeb
Las Vegas, NVChariot FiskAccountantAndrew Corp.#b87ad6
Washington, DCLia GrammerResearch Assistant3Com#dbbdeb

Random Bootstrap Panels Color: Carling

.panel-default > .panel-heading-Carling {
background-image: none;
background: #330088;
color: white;
}

.Carling tr:nth-child(even) {background: #8566b8;}
.Carling tr:nth-child(odd) {background: #c2b3db;}

// Well Color Layout:
.Carling {background: #c2b3db;} // Div Example class="well well-sm Hakes"
.Hakes {background: #8566b8;} // Pre Example class="Carling"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Carling"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#8566b8
New York, NYCarling HakesResearch AssistantTyco International#c2b3db
Las Vegas, NVChariot FiskAccountantAndrew Corp.#8566b8
Washington, DCLia GrammerResearch Assistant3Com#c2b3db

Random Bootstrap Panels Color: Chariot

.panel-default > .panel-heading-Chariot {
background-image: none;
background: #33ccaa;
color: black;
}

.Chariot tr:nth-child(even) {background: #85e0cc;}
.Chariot tr:nth-child(odd) {background: #c2f0e6;}

// Well Color Layout:
.Chariot {background: #c2f0e6;} // Div Example class="well well-sm Fisk"
.Fisk {background: #85e0cc;} // Pre Example class="Chariot"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Chariot"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#85e0cc
New York, NYCarling HakesResearch AssistantTyco International#c2f0e6
Las Vegas, NVChariot FiskAccountantAndrew Corp.#85e0cc
Washington, DCLia GrammerResearch Assistant3Com#c2f0e6

Random Bootstrap Panels Color: Lia

.panel-default > .panel-heading-Lia {
background-image: none;
background: #7722dd;
color: white;
}

.Lia tr:nth-child(even) {background: #ad7aeb;}
.Lia tr:nth-child(odd) {background: #d6bdf5;}

// Well Color Layout:
.Lia {background: #d6bdf5;} // Div Example class="well well-sm Grammer"
.Grammer {background: #ad7aeb;} // Pre Example class="Lia"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Lia"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#ad7aeb
New York, NYCarling HakesResearch AssistantTyco International#d6bdf5
Las Vegas, NVChariot FiskAccountantAndrew Corp.#ad7aeb
Washington, DCLia GrammerResearch Assistant3Com#d6bdf5

Random Bootstrap Panels Color: Chas

.panel-default > .panel-heading-Chas {
background-image: none;
background: #ff6666;
color: black;
}

.Chas tr:nth-child(even) {background: #ffa3a3;}
.Chas tr:nth-child(odd) {background: #ffd1d1;}

// Well Color Layout:
.Chas {background: #ffd1d1;} // Div Example class="well well-sm Gray"
.Gray {background: #ffa3a3;} // Pre Example class="Chas"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Chas"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#ffa3a3
New York, NYCarling HakesResearch AssistantTyco International#ffd1d1
Las Vegas, NVChariot FiskAccountantAndrew Corp.#ffa3a3
Washington, DCLia GrammerResearch Assistant3Com#ffd1d1

Random Bootstrap Panels Color: Lenna

.panel-default > .panel-heading-Lenna {
background-image: none;
background: #88bb22;
color: white;
}

.Lenna tr:nth-child(even) {background: #b8d67a;}
.Lenna tr:nth-child(odd) {background: #dbebbd;}

// Well Color Layout:
.Lenna {background: #dbebbd;} // Div Example class="well well-sm Gillespie"
.Gillespie {background: #b8d67a;} // Pre Example class="Lenna"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Lenna"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#b8d67a
New York, NYCarling HakesResearch AssistantTyco International#dbebbd
Las Vegas, NVChariot FiskAccountantAndrew Corp.#b8d67a
Washington, DCLia GrammerResearch Assistant3Com#dbebbd

Random Bootstrap Panels Color: Biron

.panel-default > .panel-heading-Biron {
background-image: none;
background: #22aabb;
color: black;
}

.Biron tr:nth-child(even) {background: #7accd6;}
.Biron tr:nth-child(odd) {background: #bde6eb;}

// Well Color Layout:
.Biron {background: #bde6eb;} // Div Example class="well well-sm Groce"
.Groce {background: #7accd6;} // Pre Example class="Biron"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Biron"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#7accd6
New York, NYCarling HakesResearch AssistantTyco International#bde6eb
Las Vegas, NVChariot FiskAccountantAndrew Corp.#7accd6
Washington, DCLia GrammerResearch Assistant3Com#bde6eb

Random Bootstrap Panels Color: Liesa

.panel-default > .panel-heading-Liesa {
background-image: none;
background: #443300;
color: white;
}

.Liesa tr:nth-child(even) {background: #8f8566;}
.Liesa tr:nth-child(odd) {background: #c7c2b3;}

// Well Color Layout:
.Liesa {background: #c7c2b3;} // Div Example class="well well-sm Franklin"
.Franklin {background: #8f8566;} // Pre Example class="Liesa"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Liesa"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#8f8566
New York, NYCarling HakesResearch AssistantTyco International#c7c2b3
Las Vegas, NVChariot FiskAccountantAndrew Corp.#8f8566
Washington, DCLia GrammerResearch Assistant3Com#c7c2b3

Random Bootstrap Panels Color: Caddric

.panel-default > .panel-heading-Caddric {
background-image: none;
background: #99bb77;
color: black;
}

.Caddric tr:nth-child(even) {background: #c2d6ad;}
.Caddric tr:nth-child(odd) {background: #e0ebd6;}

// Well Color Layout:
.Caddric {background: #e0ebd6;} // Div Example class="well well-sm Jones"
.Jones {background: #c2d6ad;} // Pre Example class="Caddric"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Caddric"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#c2d6ad
New York, NYCarling HakesResearch AssistantTyco International#e0ebd6
Las Vegas, NVChariot FiskAccountantAndrew Corp.#c2d6ad
Washington, DCLia GrammerResearch Assistant3Com#e0ebd6

Random Bootstrap Panels Color: Janetta

.panel-default > .panel-heading-Janetta {
background-image: none;
background: #ddff77;
color: black;
}

.Janetta tr:nth-child(even) {background: #ebffad;}
.Janetta tr:nth-child(odd) {background: #f5ffd6;}

// Well Color Layout:
.Janetta {background: #f5ffd6;} // Div Example class="well well-sm Johnson"
.Johnson {background: #ebffad;} // Pre Example class="Janetta"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Janetta"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#ebffad
New York, NYCarling HakesResearch AssistantTyco International#f5ffd6
Las Vegas, NVChariot FiskAccountantAndrew Corp.#ebffad
Washington, DCLia GrammerResearch Assistant3Com#f5ffd6

Random Bootstrap Panels Color: Linnea

.panel-default > .panel-heading-Linnea {
background-image: none;
background: #44cc88;
color: black;
}

.Linnea tr:nth-child(even) {background: #8fe0b8;}
.Linnea tr:nth-child(odd) {background: #c7f0db;}

// Well Color Layout:
.Linnea {background: #c7f0db;} // Div Example class="well well-sm Furgerson"
.Furgerson {background: #8fe0b8;} // Pre Example class="Linnea"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Linnea"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#8fe0b8
New York, NYCarling HakesResearch AssistantTyco International#c7f0db
Las Vegas, NVChariot FiskAccountantAndrew Corp.#8fe0b8
Washington, DCLia GrammerResearch Assistant3Com#c7f0db

Random Bootstrap Panels Color: Lexi

.panel-default > .panel-heading-Lexi {
background-image: none;
background: #44bb44;
color: white;
}

.Lexi tr:nth-child(even) {background: #8fd68f;}
.Lexi tr:nth-child(odd) {background: #c7ebc7;}

// Well Color Layout:
.Lexi {background: #c7ebc7;} // Div Example class="well well-sm Glen"
.Glen {background: #8fd68f;} // Pre Example class="Lexi"

Your HTML panel code will look like this:
<div class="panel panel-default">
<div class="panel-heading panel-heading-Lexi"><h3 class="panel-title"> ... </h3></div>
<div class="panel-body">
....
</div>
</div>
San Francisco, CALinell GorslineAccountantCeltrix#8fd68f
New York, NYCarling HakesResearch AssistantTyco International#c7ebc7
Las Vegas, NVChariot FiskAccountantAndrew Corp.#8fd68f
Washington, DCLia GrammerResearch Assistant3Com#c7ebc7