Chorke Color Scheme: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
 
(2 intermediate revisions by the same user not shown)
Line 55: Line 55:
{|
{|
| valign="top" |
| valign="top" |
  '''Green Pear Black Colors:'''
  '''Green Pear Black:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_PEAR_3XB: #1B5E20
   ├─ GREEN_PEAR_3XB: #1B5E20
Line 61: Line 61:
   └─ GREEN_PEAR_1XB: #388E3C
   └─ GREEN_PEAR_1XB: #388E3C
   
   
  '''Green Pear Plain Colors:'''
  '''Green Pear Plain:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_PEAR_1XP: #43A047
   ├─ GREEN_PEAR_1XP: #43A047
Line 67: Line 67:
   └─ GREEN_PEAR_3XP: #66BB6A
   └─ GREEN_PEAR_3XP: #66BB6A
   
   
  '''Green Pear White Colors:'''
  '''Green Pear White:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_PEAR_1XW: #81C784
   ├─ GREEN_PEAR_1XW: #81C784
   ├─ GREEN_PEAR_2XW: #A5D6A7
   ├─ GREEN_PEAR_2XW: #A5D6A7
   └─ GREEN_PEAR_3XW: #C8E6C9  
   ├─ GREEN_PEAR_3XW: #C8E6C9
  └─ GREEN_PEAR_4XW: #E8F5E9


| valign="top" |
| valign="top" |
  '''Green Lime Black Colors:'''
  '''Green Lime Black:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_LIME_3XB: #33691E
   ├─ GREEN_LIME_3XB: #33691E
Line 80: Line 81:
   └─ GREEN_LIME_1XB: #689F38
   └─ GREEN_LIME_1XB: #689F38
   
   
  '''Green Lime Plain Colors:'''
  '''Green Lime Plain:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_LIME_1XP: #7CB342
   ├─ GREEN_LIME_1XP: #7CB342
Line 86: Line 87:
   └─ GREEN_LIME_3XP: #9CCC65
   └─ GREEN_LIME_3XP: #9CCC65
   
   
  '''Green Lime White Colors:'''
  '''Green Lime White:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_LIME_1XW: #AED581
   ├─ GREEN_LIME_1XW: #AED581
   ├─ GREEN_LIME_2XW: #C5E1A5
   ├─ GREEN_LIME_2XW: #C5E1A5
   └─ GREEN_LIME_3XW: #DCEDC8  
   ├─ GREEN_LIME_3XW: #DCEDC8
  └─ GREEN_LIME_4XW: #F1F8E9


| valign="top" |
| valign="top" |
  '''Green Gold Black Colors:'''
  '''Green Gold Black:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_GOLD_3XB: #827717
   ├─ GREEN_GOLD_3XB: #827717
Line 99: Line 101:
   └─ GREEN_GOLD_1XB: #AFB42B
   └─ GREEN_GOLD_1XB: #AFB42B
   
   
  '''Green Gold Plain Colors:'''
  '''Green Gold Plain:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_GOLD_1XP: #C0CA33
   ├─ GREEN_GOLD_1XP: #C0CA33
Line 105: Line 107:
   └─ GREEN_GOLD_3XP: #D4E157
   └─ GREEN_GOLD_3XP: #D4E157
   
   
  '''Green Gold White Colors:'''
  '''Green Gold White:'''
  ─┬─────────────────────────
  ─┬─────────────────────────
   ├─ GREEN_GOLD_1XW: #DCE775
   ├─ GREEN_GOLD_1XW: #DCE775
   ├─ GREEN_GOLD_2XW: #E6EE9C
   ├─ GREEN_GOLD_2XW: #E6EE9C
   └─ GREEN_GOLD_3XW: #F0F4C3
   ├─ GREEN_GOLD_3XW: #F0F4C3
  └─ GREEN_GOLD_4XW: #F9FBE7
|}
|}


Line 333: Line 336:
* [https://examples.sencha.com/extjs/6.7.0/examples/kitchensink/frame-index.html?classic#tree-list Navigation or Tree List]
* [https://examples.sencha.com/extjs/6.7.0/examples/kitchensink/frame-index.html?classic#tree-list Navigation or Tree List]
* [http://cdn.shahed.biz/docs/theme/material/#!/app/matcolors Matte Color Plate]
* [http://cdn.shahed.biz/docs/theme/material/#!/app/matcolors Matte Color Plate]
* [https://htmlcolorcodes.com/color-names/ Color Names]

Latest revision as of 17:57, 2 August 2020

Chorke Colors:
─┬─────────────────────────
 ├─ RED  : #F42A41
 ├─ GREEN: #006A4E
 └─ WHITE: #FFFFFF
Chorke Logo Colors:
─┬─────────────────────────
 ├─ √ GREEN + WHITE
 ├─ 1 RED   + WHITE
 └─ 2 WHITE + GREEN
Chorke Concerns Logo Colors:
─┬─────────────────────────
 ├─ √ GREEN + RED   + WHITE
 ├─ 1 WHITE + RED   + WHITE 
 └─ 2 WHITE + GREEN + WHITE
Chorke Green Colors:
─┬─────────────────────────
 ├─ GREEN_DARK_1X: #008937
 ├─ GREEN_DARK_2X: #005623
 └─ GREEN_DARK_3X: #00230E

Green Black Colors:
─┬─────────────────────────
 ├─ GREEN_BLACK_3X: #1B5E20
 ├─ GREEN_BLACK_2X: #2E7D32
 └─ GREEN_BLACK_1X: #388E3C
Green Plain Colors:
─┬─────────────────────────
 ├─ GREEN_PLAIN_1X: #43A047
 ├─ GREEN_PLAIN_2X: #4CAf50
 └─ GREEN_PLAIN_3X: #66BB6A
Green White Colors:
─┬─────────────────────────
 ├─ GREEN_WHITE_1X: #81C784
 ├─ GREEN_WHITE_2X: #A5D6A7
 └─ GREEN_WHITE_3X: #C8E6C9 

Green Variation

Green Pear Black:
─┬─────────────────────────
 ├─ GREEN_PEAR_3XB: #1B5E20
 ├─ GREEN_PEAR_2XB: #2E7D32
 └─ GREEN_PEAR_1XB: #388E3C

Green Pear Plain:
─┬─────────────────────────
 ├─ GREEN_PEAR_1XP: #43A047
 ├─ GREEN_PEAR_2XP: #4CAF50
 └─ GREEN_PEAR_3XP: #66BB6A

Green Pear White:
─┬─────────────────────────
 ├─ GREEN_PEAR_1XW: #81C784
 ├─ GREEN_PEAR_2XW: #A5D6A7
 ├─ GREEN_PEAR_3XW: #C8E6C9
 └─ GREEN_PEAR_4XW: #E8F5E9
Green Lime Black:
─┬─────────────────────────
 ├─ GREEN_LIME_3XB: #33691E
 ├─ GREEN_LIME_2XB: #558B2F
 └─ GREEN_LIME_1XB: #689F38

Green Lime Plain:
─┬─────────────────────────
 ├─ GREEN_LIME_1XP: #7CB342
 ├─ GREEN_LIME_2XP: #8BC34A
 └─ GREEN_LIME_3XP: #9CCC65

Green Lime White:
─┬─────────────────────────
 ├─ GREEN_LIME_1XW: #AED581
 ├─ GREEN_LIME_2XW: #C5E1A5
 ├─ GREEN_LIME_3XW: #DCEDC8
 └─ GREEN_LIME_4XW: #F1F8E9 
Green Gold Black:
─┬─────────────────────────
 ├─ GREEN_GOLD_3XB: #827717
 ├─ GREEN_GOLD_2XB: #9E9D24
 └─ GREEN_GOLD_1XB: #AFB42B

Green Gold Plain:
─┬─────────────────────────
 ├─ GREEN_GOLD_1XP: #C0CA33
 ├─ GREEN_GOLD_2XP: #CDDC39
 └─ GREEN_GOLD_3XP: #D4E157

Green Gold White:
─┬─────────────────────────
 ├─ GREEN_GOLD_1XW: #DCE775
 ├─ GREEN_GOLD_2XW: #E6EE9C
 ├─ GREEN_GOLD_3XW: #F0F4C3
 └─ GREEN_GOLD_4XW: #F9FBE7

Reference site

Chorke Color Scheme is one of the important most factor. We love green and it's variation

  1. IBBL Banner
  2. LaTex Theme
  3. Download Now
  4. Gradient Editor
  5. Angle Matcolors
  6. Featured Topics
  7. Gradient Button
  8. Download Button
  9. Gradient Generator
  10. Flag of Bangladesh
  1. jfrog.com/confluence
  2. mycolor.space/gradient
  3. Download Button & Banner
  4. forums.docker.com/banner
  5. tomcat.apache.org/banner
  6. channelionline.com/banner

Collection of Green Gradient

From www.bitbybitblog.com

 .cki-banner-bg {
    top: 5px;
    width: 100%;
    height: 100px;
    background: #1B6B5B;
    /* background-color: #000000; */
    /* background-color: #0CBE88; */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33A26A', endColorstr='#1B6B5B');
    background: -webkit-gradient(linear, left top, left bottom, from(#33A26A), to(#1B6B5B));
    background: -moz-linear-gradient(top, #33A26A, #1B6B5B);
}

From www.phpmyadmin.net

.cki-btn-success {
    background-image: -webkit-linear-gradient(top,#5cb85c 0,#419641 100%);
    background-image: -o-linear-gradient(top,#5cb85c 0,#419641 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));
    background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c',endColorstr='#ff419641',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #3e8f3e;
}

.cki-btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.cki-btn-default,
.cki-btn-success {
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
}

From www.channelionline.com

#cki-header-custom .cki-header-time {
    background-color: #2A9060;
    padding: 10px 0;
    color: #fff;
}

#cki-header-custom .cki-header-ads {
    background-color: #339966;
    min-height: 60px;
    padding: 10px 0;
}

From ibblportal.islamibankbd.com

.cki-banner-bg {
    background: -moz-linear-gradient(center top, rgb(0, 84, 41), rgb(47, 139, 1)) repeat scroll 0% 0% transparent;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#005429), to(#2F8B01));
    box-shadow: 0px 0px 1px rgb(190, 209, 185) inset;
    -webkit-box-shadow: inset 0 1px 0 #CBD6CE, inset 0 -1px 0 #CBD6CE, 0 0 15px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: inset 0 1px 0 #CBD6CE, inset 0 -1px 0 #CBD6CE, 0 0 15px rgba(0, 0, 0, 0.07);
    background-color: #007C3C;
    overflow: hidden;
    padding: 3px;
    height: 70px;
    clear: both;
    margin: 0;
}

From sourceforge.net/projects/jasperstudio

.cki-span-bg {
    background-image: linear-gradient(to bottom, #393 0%, #373 100%);
    border-radius: 3px;
    background: #363;
    margin-left: 35px;
    overflow: hidden;
    text-align: left;
    display: block;
    padding: 4px;
    height: 34px;
    margin: 3px;
    color: #FFF;
}

From community.jaspersoft.com

.cki-btn.cki-green {
    background: #50ab22;
    border-top: 1px solid #7CD450;
    background: -moz-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#50ab22),color-stop(45%,#3f8c13),color-stop(78%,#327311),color-stop(100%,#245c08));
    background: -webkit-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
    background: -o-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
    background: -ms-linear-gradient(top,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
    background: linear-gradient(to bottom,#50ab22 0%,#3f8c13 45%,#327311 78%,#245c08 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50ab22',endColorstr='#245c08',GradientType=0);
    -webkit-transition: background 150ms;
    -webkit-background-size: 100% 120%;
    -moz-transition: background 150ms;
    -moz-background-size: 100% 120%;
    transition: background 150ms;
    background-position: 0 -5px;
    background-size: 100% 120%;
}

From cssmatic.com/gradient-generator

.cki-banner-bg {
    background-color: rgba(12,135,16,1);
    background: @include filter-gradient(#0c8710, #84ba54, horizontal);
    background: @include background-image(linear-gradient(left, rgba(12,135,16,1) 0%, rgba(132,186,84,1) 100%));
}

From colorzilla.com/gradient-editor/

.cki-banner-bg {
    // http://colorzilla.com/gradient-editor/#a9e4f7+0,d8f7ad+0,278909+100
    background-color: rgb(169,228,247); // Old browsers
    @include filter-gradient(#a9e4f7, #278909, horizontal); // IE6-9
    @include background-image(linear-gradient(left, rgba(169,228,247,1) 0%,rgba(216,247,173,1) 0%,rgba(39,137,9,1) 100%));
}

From forums.docker.com/t/

.cki-banner-bg {
    background-color: #1b5e20;
    background-image: radial-gradient(circle, #4caf50 0%, #1b5e20 100%);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

/*.cki-banner-bg {
    background: #4caf50;
    background: -moz-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #4caf50), color-stop(100%, #1b5e20));
    background: -webkit-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: -o-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: -ms-linear-gradient(top, #4caf50 0%, #1b5e20 100%);
    background: linear-gradient(to bottom, #4caf50 0%, #1b5e20 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4caf50', endColorstr='#1b5e20', GradientType=0 );
}*/

From tomcat.apache.org

.cki-banner-bg {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #4caf50;
    background: linear-gradient(to bottom, #1b5e20 -10%, #4caf50 100%);
    position: relative;
}

From nist.gov

.cki-featured-topics .field-featured-topic-area {
    text-align: center;
    font-size: 22px;
    line-height: 26px;
    color: #257a2d;
    text-transform: uppercase;
    margin-top: 0;
    font-weight: 400;
}

Collection of Green Banner

Chorke banner like TP-Link

For Chorke, Inc. banner we banner graphics some things like that. Background graphics is ok. But there need correction of floating transparent gradient on top of background images.

Smart Health Standards Forum

References