Random Cards

Random Color Generator for Tables

In Boostrap 4, Cards replaced the "old" Bootstrap pannels.

On this page are 40 cards with background colors that were randomly generated. Each card 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 Cards/Table and Well are include.

Enjoy finding the perfect background color for your project!

Random Bootstrap Panels Color: Joelynn

.panel-default > .card-header-Joelynn {
background-image: none;
background: #ffcc99;
color: black;
}

.Joelynn tr:nth-child(even) {background: #ffe0c2;}
.Joelynn tr:nth-child(odd) {background: #fff0e0;}

// Well Color Layout:
.Joelynn {background: #fff0e0;} // Div Example class="well well-sm Garnet"
.Garnet {background: #ffe0c2;} // Pre Example class="Joelynn"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joelynn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#ffe0c2
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#fff0e0
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#ffe0c2
Las Vegas, NVChas FedouSystems EngineerCompuware#fff0e0

Random Bootstrap Panels Color: Janaya

.panel-default > .card-header-Janaya {
background-image: none;
background: #558800;
color: white;
}

.Janaya tr:nth-child(even) {background: #99b866;}
.Janaya tr:nth-child(odd) {background: #ccdbb3;}

// Well Color Layout:
.Janaya {background: #ccdbb3;} // Div Example class="well well-sm Fritz"
.Fritz {background: #99b866;} // Pre Example class="Janaya"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Janaya"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#99b866
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#ccdbb3
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#99b866
Las Vegas, NVChas FedouSystems EngineerCompuware#ccdbb3

Random Bootstrap Panels Color: Joleen

.panel-default > .card-header-Joleen {
background-image: none;
background: #66ffaa;
color: black;
}

.Joleen tr:nth-child(even) {background: #a3ffcc;}
.Joleen tr:nth-child(odd) {background: #d1ffe6;}

// Well Color Layout:
.Joleen {background: #d1ffe6;} // Div Example class="well well-sm Gillit"
.Gillit {background: #a3ffcc;} // Pre Example class="Joleen"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joleen"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#a3ffcc
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#d1ffe6
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#a3ffcc
Las Vegas, NVChas FedouSystems EngineerCompuware#d1ffe6

Random Bootstrap Panels Color: Julienne

.panel-default > .card-header-Julienne {
background-image: none;
background: #881177;
color: white;
}

.Julienne tr:nth-child(even) {background: #b870ad;}
.Julienne tr:nth-child(odd) {background: #dbb8d6;}

// Well Color Layout:
.Julienne {background: #dbb8d6;} // Div Example class="well well-sm Giddings"
.Giddings {background: #b870ad;} // Pre Example class="Julienne"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Julienne"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#b870ad
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#dbb8d6
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#b870ad
Las Vegas, NVChas FedouSystems EngineerCompuware#dbb8d6

Random Bootstrap Panels Color: Johna

.panel-default > .card-header-Johna {
background-image: none;
background: #558844;
color: white;
}

.Johna tr:nth-child(even) {background: #99b88f;}
.Johna tr:nth-child(odd) {background: #ccdbc7;}

// Well Color Layout:
.Johna {background: #ccdbc7;} // Div Example class="well well-sm Gratte"
.Gratte {background: #99b88f;} // Pre Example class="Johna"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Johna"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#99b88f
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#ccdbc7
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#99b88f
Las Vegas, NVChas FedouSystems EngineerCompuware#ccdbc7

Random Bootstrap Panels Color: Leia

.panel-default > .card-header-Leia {
background-image: none;
background: #6677aa;
color: black;
}

.Leia tr:nth-child(even) {background: #a3adcc;}
.Leia tr:nth-child(odd) {background: #d1d6e6;}

// Well Color Layout:
.Leia {background: #d1d6e6;} // Div Example class="well well-sm Franklin"
.Franklin {background: #a3adcc;} // Pre Example class="Leia"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Leia"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#a3adcc
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#d1d6e6
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#a3adcc
Las Vegas, NVChas FedouSystems EngineerCompuware#d1d6e6

Random Bootstrap Panels Color: Chas

.panel-default > .card-header-Chas {
background-image: none;
background: #557799;
color: white;
}

.Chas tr:nth-child(even) {background: #99adc2;}
.Chas tr:nth-child(odd) {background: #ccd6e0;}

// Well Color Layout:
.Chas {background: #ccd6e0;} // Div Example class="well well-sm Fedou"
.Fedou {background: #99adc2;} // Pre Example class="Chas"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Chas"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#99adc2
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#ccd6e0
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#99adc2
Las Vegas, NVChas FedouSystems EngineerCompuware#ccd6e0

Random Bootstrap Panels Color: Che

.panel-default > .card-header-Che {
background-image: none;
background: #aaaa00;
color: white;
}

.Che tr:nth-child(even) {background: #cccc66;}
.Che tr:nth-child(odd) {background: #e6e6b3;}

// Well Color Layout:
.Che {background: #e6e6b3;} // Div Example class="well well-sm Fuqua"
.Fuqua {background: #cccc66;} // Pre Example class="Che"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Che"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#cccc66
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#e6e6b3
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#cccc66
Las Vegas, NVChas FedouSystems EngineerCompuware#e6e6b3

Random Bootstrap Panels Color: Joannes

.panel-default > .card-header-Joannes {
background-image: none;
background: #ff44ff;
color: black;
}

.Joannes tr:nth-child(even) {background: #ff8fff;}
.Joannes tr:nth-child(odd) {background: #ffc7ff;}

// Well Color Layout:
.Joannes {background: #ffc7ff;} // Div Example class="well well-sm Goodwin"
.Goodwin {background: #ff8fff;} // Pre Example class="Joannes"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joannes"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#ff8fff
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#ffc7ff
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#ff8fff
Las Vegas, NVChas FedouSystems EngineerCompuware#ffc7ff

Random Bootstrap Panels Color: Brendis

.panel-default > .card-header-Brendis {
background-image: none;
background: #99ccdd;
color: black;
}

.Brendis tr:nth-child(even) {background: #c2e0eb;}
.Brendis tr:nth-child(odd) {background: #e0f0f5;}

// Well Color Layout:
.Brendis {background: #e0f0f5;} // Div Example class="well well-sm Jones"
.Jones {background: #c2e0eb;} // Pre Example class="Brendis"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Brendis"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#c2e0eb
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#e0f0f5
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#c2e0eb
Las Vegas, NVChas FedouSystems EngineerCompuware#e0f0f5

Random Bootstrap Panels Color: Joellyn

.panel-default > .card-header-Joellyn {
background-image: none;
background: #448844;
color: white;
}

.Joellyn tr:nth-child(even) {background: #8fb88f;}
.Joellyn tr:nth-child(odd) {background: #c7dbc7;}

// Well Color Layout:
.Joellyn {background: #c7dbc7;} // Div Example class="well well-sm Gore"
.Gore {background: #8fb88f;} // Pre Example class="Joellyn"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joellyn"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#8fb88f
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#c7dbc7
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#8fb88f
Las Vegas, NVChas FedouSystems EngineerCompuware#c7dbc7

Random Bootstrap Panels Color: Burnaby

.panel-default > .card-header-Burnaby {
background-image: none;
background: #994499;
color: white;
}

.Burnaby tr:nth-child(even) {background: #c28fc2;}
.Burnaby tr:nth-child(odd) {background: #e0c7e0;}

// Well Color Layout:
.Burnaby {background: #e0c7e0;} // Div Example class="well well-sm Gay"
.Gay {background: #c28fc2;} // Pre Example class="Burnaby"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Burnaby"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#c28fc2
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#e0c7e0
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#c28fc2
Las Vegas, NVChas FedouSystems EngineerCompuware#e0c7e0

Random Bootstrap Panels Color: Lida

.panel-default > .card-header-Lida {
background-image: none;
background: #5522bb;
color: white;
}

.Lida tr:nth-child(even) {background: #997ad6;}
.Lida tr:nth-child(odd) {background: #ccbdeb;}

// Well Color Layout:
.Lida {background: #ccbdeb;} // Div Example class="well well-sm Green"
.Green {background: #997ad6;} // Pre Example class="Lida"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Lida"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#997ad6
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#ccbdeb
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#997ad6
Las Vegas, NVChas FedouSystems EngineerCompuware#ccbdeb

Random Bootstrap Panels Color: Joye

.panel-default > .card-header-Joye {
background-image: none;
background: #1133aa;
color: white;
}

.Joye tr:nth-child(even) {background: #7085cc;}
.Joye tr:nth-child(odd) {background: #b8c2e6;}

// Well Color Layout:
.Joye {background: #b8c2e6;} // Div Example class="well well-sm Groce"
.Groce {background: #7085cc;} // Pre Example class="Joye"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Joye"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#7085cc
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#b8c2e6
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#7085cc
Las Vegas, NVChas FedouSystems EngineerCompuware#b8c2e6

Random Bootstrap Panels Color: Jocelin

.panel-default > .card-header-Jocelin {
background-image: none;
background: #eeff22;
color: black;
}

.Jocelin tr:nth-child(even) {background: #f5ff7a;}
.Jocelin tr:nth-child(odd) {background: #faffbd;}

// Well Color Layout:
.Jocelin {background: #faffbd;} // Div Example class="well well-sm Gray"
.Gray {background: #f5ff7a;} // Pre Example class="Jocelin"

Your HTML panel code will look like this:
<div class="card mt-3">
<div class="card-header card-header-Jocelin"><h3 class="card-title"> ... </h3></div>
<div class="card-body">
....
</div>
</div>
Orlando, FLJulienne GiddingsOffice ManagerClaire's Stores#f5ff7a
Dallas, TXJohna GratteSystems EngineerNuevo Energy Co.#faffbd
San Francisco, CALeia FranklinOffice ManagerT. Rowe Price Associates#f5ff7a
Las Vegas, NVChas FedouSystems EngineerCompuware#faffbd